How to align text vertically center in div with CSS?
I have a div tag which contains text, and I want to align the contents of this div vertically center.
Here is my div style:
#box
{
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS
html
vertical-alignment
- asked 8 years ago
- B Butts
4Answer
You can easity do this by adding the following piece of CSS code:
display: table-cell;
vertical-align: middle;
Thats means your CSS finally looks like :
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
jsfiddle here
- answered 8 years ago
- G John
Another way (not mentioned here yet) is with Flexbox.
Just add the following code to the container element:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh A good place to start with Flexbox to see some of it's features and get syntax for maximum browser support is flexyboxes
Also, browser support nowadays is quite good: caniuse
For cross-browser compatibility for display: flex and align-items, you can use the following:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
- answered 8 years ago
- G John
You can try this basic approach:
#box {
height: 90px;
line-height: 90px;
}
Only works for a single line of text though, because we set the line's height to the same height as the containing box element.
A more versatile approach
And here is another way to align text vertically, this solution will work for a single line and multiple lines of text, but still requires a fixed height container:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. The CSS just sizes the
vertical-align: middle. Then it sets the line-height back to normal for the so its contents will flow naturally inside the block.
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Simulating table display
And here is another option, which may not work on older browsers that don't support display: table and display: table-cell (basically that means Internet Explorer 7). The HTML is the same as the second example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Using CSS we 'simulate' table display behavior, since tables support vertical alignment:
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
}
- answered 8 years ago
- B Butts
|
accepted
|
You can try this basic approach:
Only works for a single line of text though, because we set the line's height to the same height as the containing box element. A more versatile approachAnd here is another way to align text vertically, this solution will work for a single line and multiple lines of text, but still requires a fixed height container:
The CSS just sizes the
Simulating table displayAnd here is another option, which may not work on older browsers that don't support
Using CSS we 'simulate' table display behavior, since tables support vertical alignment:
Using absolute positioningThis technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article on Smashing Magazine. |
- answered 8 years ago
- Sandy Hook
Your Answer