html - How to center vertically a multiline div? -


this question has answer here:

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

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

visual studio 2010 - Connect to informix database windows form application -

android - Associate same looper with different threads -