how do I align text vertically? (CSS)

[Amazin]

as you can see, the text in the header and the boxes (p1-p4) are not centered vertically.

I did experiement with verticaly-align property but no changes.

H1 {border-style: solid;
text-align: center;
border-width: 5px;
color: #0066FF;
background-color: #b0c4de;
width: 100%;
Height: 50px ;
}

Nav {padding-bottom: 20px; }

#first ul li { display: inline;
list-style-type: none;
margin-right: 10px;
vertical-align: middle;}

#first ul { margin: 0;
padding-left: 0px;
list-style-type: none;
}

#first a { display: inline-block;
text-align: center;
text-decoration: none;
background-color: grey;
border-color: red;
border-style: solid;
border-width: 2px;
width: 40px;
height: 15px;
line-height: 8px;

<div id="first">
<ul>

<li><a href=#>p1</a></li>
<li><a href=#>p2</a></li>
<li><a href=#>p3</a></li>
<li><a href=#>p4</a></li>
</ul>
</div>

 

[Faevilangel]

The best way to centre items vertically is using absolute positioning

Example:

#element {
height:200px;
position:absolute;
left:50%;
top:50%;
width:200px;
}

You will need to amend the left, top, height and width's to fit your needs.

 

[avecSys]

Try this : http://phrogz.net/css/vertical-align/

 

[fisicx]

Vertical align is difficult and full of bugs. Absolute positioning does work but isn't very dynamic as it can't easily cope with how people use mobile devices. And if I resize my window or zoom in and out (as many do) it all falls to bits.

So it's better to avoid anything that relies on positioning.

 

[Faevilangel]

Vertical align is difficult and full of bugs. Absolute positioning does work but isn't very dynamic as it can't easily cope with how people use mobile devices. And if I resize my window or zoom in and out (as many do) it all falls to bits.

So it's better to avoid anything that relies on positioning.

Totally agree, vertical aligning is a pain in the backside and is rarely needed, you can use margin on the element but comes with same kind of issues.

 

[UKSBD]

don't give it a height just put padding round the text.

 

[Massive_stock_sale]

I wouldn't use absolute positioning. I can't seeem to post html tags.

try looking into margin attributes and set them to auto

 

[fisicx]

try looking into margin attributes and set them to auto

Doesn't work vertically, auto is only good for horizontal.

 

[UKSBD]

Judging by the screenshot, didn't the OP mean horizontal rather than vertical?

Is he just trying to center the text in the boxes?

 

[Dan_HiHosting]

Yes but they're trying to centre the text vertically in the box, so that the border is the same above and below I believe.

In which case, you may want to look at line height and any padding before and after the text. It should be a simple case of styling the H1 appropriately.

Although I do find it odd to have the box style applied directly to H1. I'd be inclined to apply the text style to H1, and the box style to a div within which it can reside. That should provide any necessary flexibility too.

I think the OP means the vertical text alignment in the nav LIs too. Again, line light and vertical top/bottom padding should work here.

If you press F12 you can play around with the CSS and see live what your style changes/additions do.

You can also search on and post to stack overflow, and put your code in jsfiddle for others to see:
http://stackoverflow.com/
http://jsfiddle.net/

And if you haven't got developer tool plugins for Firefox/Chrome then do add them as well

I hope that helps a little

Good luck!

Dan

 

[Dan_HiHosting]

Oh yes, and Amazin, have a look at this: http://css-tricks.com/centering-css-complete-guide/

That's a great site in general as well.

 

[Massive_stock_sale]

Doesn't work vertically, auto is only good for horizontal.

margin-top and margin-bottom

pm me the html and i'll fix it for you.

 

[Amazin]

Judging by the screenshot, didn't the OP mean horizontal rather than vertical?

Is he just trying to center the text in the boxes?

yeah, I was trying to center the texts within the boxes so they appear exactly center.
http://css-tricks.com/centering-css-complete-guide/
http://css-tricks.com/centering-css-complete-guide/

thanks for that link btw, it showed me 2 ways of doing it:

you can use the padding attribute to make sure top and bottom are the same so they appear to be center.

or, you can make Height and inline height the same. Its pretty simply and I just did it!

what I don't fully get is that how making height and inline height the same will vertically center the text? Inline height is the height on the line you're writing on and height is ???

someone please expalin?

btw, I really appreciate the feedback and I hope other people struggling with vertical aligning sees this

 

[fisicx]

Now go check your site on tablet and then switch from portrait to landscape. Does it still work?
Then resize the window on your PC/mac? Does it still work?
Then go to your phone and change the aspect and pinch/zoom.

If it does work on everything well done!

 

[Dan_HiHosting]

what I don't fully get is that how making height and inline height the same will vertically center the text? Inline height is the height on the line you're writing on and height is ???

someone please expalin?

btw, I really appreciate the feedback and I hope other people struggling with vertical aligning sees this

Sorry do you mean making the line height and the height of the div the same?
That's the alternative method to using the same top and bottom padding for vertical centering

It works because if you think in the block model (which CSS elements adhere to), the block of text is then the same height as block of the div it's inside. And by default it'll centre the text.

You can check this out by using F12 and inspecting the elements (or right click > Inspect Element). You should see a block for the text, and a block for the div when you hover over them. If they match, you'll get the vertical centering you want.

I hope that helps.

 

[UKSBD]

does padding:*% not work on most devices?

 

[Massive_stock_sale]

have you tried


vertical-align middle
display table-cell

i cant post html but these should go in your css or in style=""