I am displaying number of boxes in a row with fix height and width, generated from <li> tags. now I need to align the text in the vertical center. The CSS vertical-align has no impact, maybe I am missing something???
I am not looking for tricks using (margin, padding, line-height), these will not work because some text are long and will break into two lines.
Please find the actual code:
ul.catBlock{
width:960px;
height: 270px;
border:1px solid #ccc;
}
ul.catBlock li{
list-style: none;
float:left;
display:block;
text-align: center;
width:160px;
height: 100px;
}
ul.catBlock li a{
display: block;
padding: 30px 10px 5px 10px;
height:60px;
}
<ul class="catBlock">
<li><a href="#">IP Phone</a></li>
<li><a href="#">Dual SIM Switch Server</a></li>
<li><a href="#">IP PBX</a></li>
</ul>
This question is related to
html
css
vertical-alignment
However many years late this response may be, anyone coming across this might just want to try
li {
display: flex;
flex-direction: row;
align-items: center;
}
Browser support for flexbox is far better than it was when @scottjoudry posted his response above, but you may still want to consider prefixing or other options if you're trying to support much older browsers. caniuse: flex
In the future, this problem will be solved by flexbox. Right now the browser support is dismal, but it is supported in one form or another in all current browsers.
Browser support: http://caniuse.com/flexbox
.vertically_aligned {
/* older webkit */
display: -webkit-box;
-webkit-box-align: center;
-webkit-justify-content: center;
/* older firefox */
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
/* IE10*/
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-pack: center;
/* newer webkit */
display: -webkit-flex;
-webkit-align-items: center;
-webkit-box-pack: center;
/* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
display: flex;
align-items: center;
justify-content: center;
}
Background on Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
line-height
is how you vertically align text. It is pretty standard and I don't consider it a "hack". Just add line-height: 100px
to your ul.catBlock li
and it will be fine.
In this case you may have to add it to ul.catBlock li a
instead since all of the text inside the li
is also inside of an a
. I have seen some weird things happen when you do this, so try both and see which one works.
Give this solution a try
you may have to use div instead of li for that
.DivParent {_x000D_
height: 100px;_x000D_
border: 1px solid lime;_x000D_
white-space: nowrap;_x000D_
}_x000D_
.verticallyAlignedDiv {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
white-space: normal;_x000D_
}_x000D_
.DivHelper {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
height:100%;_x000D_
}
_x000D_
<div class="DivParent">_x000D_
<div class="verticallyAlignedDiv">_x000D_
<p>Isnt it good!</p>_x000D_
_x000D_
</div><div class="DivHelper"></div>_x000D_
</div>
_x000D_
Simple solution for vertical align middle... for me it works like a charm
ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}
Surprisingly (or not), the vertical-align
tool actually works best for this job. Best of all, no Javascript is required.
In the following example, I am positioning the outer
class in the middle of the body, and the inner
class in the middle of the outer
class.
Preview: http://jsfiddle.net/tLkSV/513/
HTML:
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle
.
Note: You may notice in my code below that my <span>
tag and <div>
tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.
Define the parent with display: table
and the element itself with vertical-align: middle
and display: table-cell
.
As explained in here: https://css-tricks.com/centering-in-the-unknown/.
As tested in the real practice, the most reliable yet elegant solution is to insert an assistent inline element into the
<li />
element as the 1st child, which height should be set to 100% (of its parent’s height, the<li />
), and itsvertical-align
set to middle. To achieve this, you can put a<span />
, but the most convenient way is to useli:after
pseudo class.
Screenshot:
ul.menu-horizontal {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
}
ul.menu-horizontal:after {
content: '';
clear: both;
float: none;
display: block;
}
ul.menu-horizontal li {
padding: 5px 10px;
box-sizing: border-box;
height: 100%;
cursor: pointer;
display: inline-block;
vertical-align: middle;
float: left;
}
/* The magic happens here! */
ul.menu-horizontal li:before {
content: '';
display: inline;
height: 100%;
vertical-align: middle;
}
There are no perfect answers provided here except Asaf's answer which doesn't provide any code nor any example, so I would like to contribute mine...
Inorder to make vertical-align: middle;
work, you need to use display: table;
for your ul
element and display: table-cell;
for li
elements and than you can use vertical-align: middle;
for li
elements.
You don't need to provide any explicit margins
, paddings
to make your text vertically middle.
ul.catBlock{
display: table;
width:960px;
height: 270px;
border:1px solid #ccc;
}
ul.catBlock li {
list-style: none;
display: table-cell;
text-align: center;
width:160px;
vertical-align: middle;
}
ul.catBlock li a {
display: block;
}
Source: Stackoverflow.com