Hello question on centering

[Ducky]

Hello, trying to vertically centre my text in the middle of the nav bar then float it to the right so I can have more content on the left.

Why is my text displaying over two lines when I use margin-top: 50%; margin-left: 50%; and displaying normally obviously not centered vertically when not using the margin css.

http://codepen.io/samducker/pen/ZWEJaN

How can I improve my coding using bootstrap when centering in a div. I also have problems with a similar issue in here

http://codepen.io/samducker/pen/vGYJRZ

I’m using padding to put the text in the middle but this doesn’t look good on different resolutions and making the page smaller. What is the best way to center the text ontop of my background image (both vertically and horizontally)

[Paulie_D]

Firstly, to see what is happening, put a border on the list items and anchors…it’ll help you visualise the issues.

.nav > li {
  border:1px solid white;
}

.nav > li > a {
  color: white;
  font-family: Raleway;
  padding-left: 40px;
  border:1px solid red;
  margin-top: 50%;
  margin-left: 50%;
}

http://codepen.io/Paulie-D/pen/RawZBL

[Paulie_D]

If you search this site for “centering” Chris has an excellent guide.

Also, you’re asking a lot of questions all at the same time…pace yourself.

Fix one problem, then ask a new separate question.

[Ducky]

Thanks for the quick reply @Paulie_D

I followed you’re advice and read up on @chriscoyier ‘s guide. Still struggling with this navigation issue, any idea where am I going wrong?

I have added the changes I’ve made following reading the guide, in comments in the css.

http://codepen.io/samducker/pen/ZWEJaN

[Author]

Posts