2015 m. liepos 29 d., trečiadienis

Teksto lygiavimas vertikaliai

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ą