CSS vertical alignment text inside li

Question

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:

CSS 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;
}

HTML code

<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>

Mark Garcia · Accepted Answer · 2015-01-14 05:37:04Z

110

Define the parent with display: table and the element itself with vertical-align: middle and display: table-cell.

edited Jan 14, 2015 at 5:37

Mark Garcia

17.9k4 gold badges60 silver badges95 bronze badges

answered Dec 20, 2011 at 15:34

Asaf Chertkoff

1,2431 gold badge9 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AK4668 Over a year ago

This is from W3CSchool... Note: The values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

polkovnikov.ph Over a year ago

What about <li>s getting into a single row?

Stevo Perisic Over a year ago

Also this is not CATO accessibility compliant if you are in fact NOT showing tabular data.

Optimus Over a year ago

I know of the solutions, they are hacky at best, there is a reason why css3 and html5 are a thing now, and its because people were not satisfied with the previous iterations. I was just challenging your statement that "a bad workman blames his tools". IMO a truly bad workman never even questions the tools they are provided with.

flyingace · Accepted Answer · 2024-10-10 16:19:22Z

102

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

Update August, 2024:

Updating this now in 2024 just to say that align-content: center may be the thing you're looking for, even outside of flexbox, provided you're doing this inside of a block element. At the moment browser support is still somewhat limited, but maybe by the time you're reading this you'll be covered! caniuse: align-content

edited Oct 10, 2024 at 16:19

answered Dec 11, 2017 at 16:53

flyingace

1,9471 gold badge19 silver badges25 bronze badges

1 Comment

Benjineer Over a year ago

This doesn't play nice with list-style-image in Chrome - the image disappears

Logan Serman · Accepted Answer · 2011-12-17 15:37:57Z

63

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.

answered Dec 17, 2011 at 15:37

Logan Serman

30k28 gold badges107 silver badges144 bronze badges

4 Comments

AK4668 Over a year ago

I have used line-height initially but when the content is long it will break into 2 lines and let's say 100px gap each line and wil make it look worse. is there any other way?

Logan Serman Over a year ago

I think there is a way to have vertical-align: middle if you have display: table-cell. I have never used it though. Take a look here: phrogz.net/css/vertical-align/index.html

CodeFinity Over a year ago

Great solution - I set the li 'line height' to be the same as my min-height, and the text is vertically aligned - at least close enough for a visual inspection. The 'table' solution above is certainly not semantic, and is hackish in nature. Any time we are doing that, we are increasing the chances of broken displays or quirky behavior somewhere in the responsive landscape.

Asle Over a year ago

Thanks! Works great on the <a> element! What a simple solution :-) Just tweak it to correct value and it centers vertically perfect!

Scott Joudry · Accepted Answer · 2014-07-08 17:06:39Z

18

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/

answered Jul 8, 2014 at 17:06

Scott Joudry

90210 silver badges25 bronze badges

3 Comments

Wex Over a year ago

At the time this question was asked I'm not sure this would have been a good answer but today we're seeing ~95% prefixed support so I certainly think this is a viable option.

Thierry Over a year ago

If you wish the <li> elements to wrap (instead of being shrinked), add flex-wrap: wrap; at <ul> level

Mattwmaster58 Over a year ago

What element do I add this class too?

Wex · Accepted Answer · 2014-04-28 16:19:08Z

16

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.

edited Apr 28, 2014 at 16:19

answered Dec 20, 2011 at 16:53

Wex

15.7k10 gold badges67 silver badges108 bronze badges

2 Comments

AK4668 Over a year ago

Fantastic, it makes a good sense. //I can't vote your answer now because my min reputation should be 15.

Wex Over a year ago

For those of you looking for this technique applied directly to the question - jsfiddle.net/utGVt/385

Mr. Alien · Accepted Answer · 2013-06-22 05:49:09Z

6

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.

Demo

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;
}

answered Jun 22, 2013 at 5:49

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

2 Comments

str11 Over a year ago

This doesn't help since the only reason its been aligned vertically is because you forced it down with padding on the a tag

Thomas Over a year ago

@Mr.Alien I will reiterate though that the only problem with this solution is that margin rules are ignored.

Adrian · Accepted Answer · 2018-03-30 15:57:39Z

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 its vertical-align set to middle. To achieve this, you can put a <span />, but the most convenient way is to use li:after pseudo class.

Screenshot: enter image description here

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;
}

Fahad Ali · Accepted Answer · 2018-04-10 06:48:13Z

2

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;}

answered Apr 10, 2018 at 6:48

Fahad Ali

1151 silver badge4 bronze badges

Comments

keshav · Accepted Answer · 2015-08-15 06:36:32Z

0

Give this solution a try

Works best in most of the cases

you may have to use div instead of li for that

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

answered Aug 15, 2015 at 6:36

keshav

7526 silver badges19 bronze badges

1 Comment

manafixer Over a year ago

Why this need a divHelper to vertical-align? I saw it on another topic, but I can't understand why it doesn't align it self without another div..

Collectives™ on Stack Overflow

CSS vertical alignment text inside li

CSS code

HTML code

9 Answers 9

4 Comments

1 Comment

4 Comments

3 Comments

2 Comments

2 Comments

Comments

Comments

Works best in most of the cases

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

CSS code

HTML code

9 Answers 9

4 Comments

1 Comment

4 Comments

3 Comments

2 Comments

2 Comments

Comments

Comments

Works best in most of the cases

1 Comment

Linked

Related