Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS to vertically align text to middle of div

Tags:

html

css

What is the correct way to force text in a div to vertically align to the middle? I have found a couple 'tricks', but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple:

http://jsfiddle.net/rogerguess/DawFy/

.header {
    display: inline-block;    
    text-align: center;
    width: 123px;
    background: green;
    border-radius: 4px 4px 4px 4px;
    height: 80px;
    vertical-align: middle;
}

<div >
    <div class="header">test1 </div>
    <div class="header">some text that will wrap</div>
    <div class="header">test3</div>
</div>
like image 278
Roger Avatar asked Apr 23 '13 15:04

Roger


People also ask

How do I vertically align text in the middle of a div?

Using the Line-Height Property In most cases, you can also center text vertically in a div by setting the line-height property with a value that is equal to the container element's height.

How do I center text vertically in CSS?

The CSS just sizes the <div> , vertically center aligns the <span> by setting the <div> 's line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle . Then it sets the line-height back to normal for the <span> , so its contents will flow naturally inside the block.


1 Answers

Change display: inline-block; to display: table-cell;

like image 193
Tiago César Oliveira Avatar answered Sep 23 '22 14:09

Tiago César Oliveira