vertical centering?

[Doodayer]

Hi I’m having issues with getting text, and images in my navigation bar to center out properly. for some reason, I can’t get anything to center out vertically in my navigation bar. Any thoughts or ideas?

[__]

https://css-tricks.com/centering-css-complete-guide/

[Paulie_D]

Any thoughts or ideas?

Without code…nope.

A minimal example in Codepen.io is the way we can assist.

See the Tips box —>

Help us help you.

[Doodayer]

here ya go. I just can’t figure out how to vertically center my text, and images in the nav bar
http://codepen.io/Doodayer/pen/vGyHp

thanks for helping guys!

[__]

in order for vertical-align:middle to have any effect, your lis need to be displayed as inline-block (not just inline).

In addition, the image and adjacent text would both need to be inline-block (you’d need to wrap the text in an element, a span would be most appropriate) before you could vertically align them.

[Doodayer]

I’m pretty new to html, and css so what do you mean by wrap them in an element?

[__]

I’m pretty new to html, and css

Sounds like you need to learn, then. : )

what do you mean by wrap them in an element?

I mean the text would need to be contained in another element (a sibling element of the img) if you wanted to vertically center it with the image. vertical-align does not have any effect on plain text.

http://codepen.io/adrian-enspired/pen/BowED

[Doodayer]

thank that, and it worked for the most part. now the problem is the image and the first word are centered, but the rest remain below. reasons?

edit: the image still doesn’t center all that well, could this be due to it using the top left corner of the image as its center point, instead of actually using the center of the image?

[__]

the image and the first word are centered, but the rest remain below.

Do you mean “the rest” of the lis? That’s not what I see. Do you see this in my codepen? if so, what browser are you using?

the image still doesn’t center all that well, could this be due to it using the top left corner of the image as its center point, instead of actually using the center of the image?

These rules will align both the image and the span (which contains your text) on a single line through the middle. Conceptually, like this:

    +-----+    +----------------+
----| img |----| span with text |----  <-- vertical align: middle
    +-----+    +----------------+

It’s a bit hard to tell in your codepen, because the image is not actually loaded (you would need to give a full URL, since the image is not hosted on codepen.io). I’ve replaced the image with a 20×20 image in my codepen; have a look.

[Doodayer]

I’m using firefox to test it. Still for some reason it displays them lower than the image and first word. heres a screen shot:
http://i.imgur.com/fAvF4Df.jpg

[__]

Is that screenshot from your site, or the codepen? does it look correct in the pen?

[Doodayer]

if you look closely at your codepen, the first word is still lower than the rest. Why is this?

and that was a screen shot from the actual test on firefox

[Author]

Posts