html - How to center vertically a multiline div? -
this question has answer here:
- css vertical centering 10 answers
i want center vertically these lines. tried line-height
method, lines don't adjusts on holder .item
.
i have html:
<li><a href="#" class="item"> <span>line 1</span><br> <span>line 2</span><br> <span>line 3</span> </a> </li>
and css:
.item { text-align: center; display: block; height: 125px; padding: 10px 0; border-radius: 2px; margin-bottom: 10px; color: #fff; }
you use same padding on top on bottom, way text within element "centered" vertically. this:
.item { text-align: center; display: block; padding: 60px 0px; border-radius: 2px; margin-bottom: 10px; color: #fff; }
an other method using line-height, works if there single line of text.
also, check this out.
Comments
Post a Comment