This solution will work for a single line and multiple lines of text, but still requires a fixed height container:
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
The CSS just sizes the
<div>
, then vertically center aligns the <span>
by setting the <div>
's line-height equal to its height, and making 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.div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Komentarų nėra:
Rašyti komentarą