CODEWITHSUNDEEP
cssvertical-alignment
Cheeso
Cheeso

Reputation: 192467

How can I use CSS to vertically center the text in an anchor, within a LI?

Variations on this question have been asked many times. Vertical centering with CSS is a challenge.

I have a particular scenario, dealing with a list displayed horizontally. The markup is like this: 

  <ul id='ul1' class='c'>
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li>
    <li><a href='javascript:void(0)'>Fobble</a></li>
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
  </ul>

The style is like this: 

  ul.c {
    height:52px;
    text-align:center;
  }
  ul li a {
    float:left;
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    line-height:1em;
    width:100px;
  }
  ul li a:hover {
    background: #CCC;
  }
  ul li {
    height:52px;
    display:inline-block;
  }

The resulting list looks like this:

enter image description here

But I want all the boxes to be the same height, and I want the text to be vertically centered in each box. I can set the box-height by adding a height style for the A elements. The result looks like this:

enter image description here

...which is close to what I want, but the vertical-centering isn't happening.

I can set line-height for the text, as suggested in this post, to do the vertical centering. I can even pick different values of line-height for different A elements, if I know which of the elements will get multiple lines of text. But I don't know which ones will require multiple lines.

How can I get it to center when some of the A elements have text that wraps?

Upvotes: 25

Views: 26707

Answers (6)

VonC
VonC

Reputation: 1324063

But I want all the boxes to be the same height, and I want the text to be vertically centered in each box.

By using the recent (2024) align-content: center, I get:

vertically centered

See fiddle or snippet below:

ul.c {
  text-align: center;
}

ul li {
  height: 52px;
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

ul li a {
  align-content: center;
  height: 100%;
  width: 100%;
  float: left;
  text-decoration: none;
  border: 1px solid Maroon;
  background: #FFEF8A;
  line-height: 1em;
}

ul li a:hover {
  background: #CCC;
}
<ul id='ul1' class='c'>
  <li><a href='javascript:void(0)'>Fribble Fromme</a></li>
  <li><a href='javascript:void(0)'>Fobble</a></li>
  <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
</ul>

No JavaScript or display:table-cell;/display:table or align-items: center; needed.

align-content: center is enough.

Upvotes: 0

Joe Giusti
Joe Giusti

Reputation: 179

line-height:250%; worked for me

Upvotes: 0

andydavies
andydavies

Reputation: 3293

Old question, but the answer can now be updated with Flexbox.

a {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Upvotes: 34

carrieat
carrieat

Reputation: 92

in the css you have set the height and line-height to the same. Then you will get a rectangular box.

But still you are seeing space in the bottom the reason is due to padding

adding two values in padding adds top and bottom padding

padding: top bottom;

since it is 2 and 12 you are seeing huge space.

try this

height: 52px;
line-height:52px;
padding: 6px 6px; // here you have to tweak and see the output
vertical-align:center;

let me know it is working

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could use display:table, etc. along with vertical-align:middle

ul.c {
    text-align:center;
    display:table;
}

ul li {   
    float:left;    
}

ul li a {
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    width:100px;
    height:52px;
    display:table-cell;
    vertical-align:middle;
}

ul li a:hover {
    background: #CCC;
}

Example: http://jsfiddle.net/kf52n/2/

Upvotes: 17

Cheeso
Cheeso

Reputation: 192467

I could not figure a way to do this in CSS. I found that I could do what I needed with Javascript, setting the padding-top and padding-bottom to appropriate values at runtime. The technique is to measure the "natural" height of the A element, then set the padding so that the A element is vertically centered.

here is the necessary js code:

  function setHeightIntelligently(ulElement) {
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight,
        naturalHeight, pad;
    items = ulElement.children;
    for(i=0, L1 = items.length;i<L1;i++){
      if (items[i].tagName.toUpperCase() == 'LI') {
        anchor = items[i].children[0]; 
        naturalHeight = anchor.clientHeight;
        pad = (availableHeight - naturalHeight)/2;
        anchor.style.paddingTop= pad+'px';
        anchor.style.paddingBottom= pad+'px';
      }
    }
  }

  function init() {
    var element = document.getElementById('ul1');
    setHeightIntelligently(element);
  }

In the CSS, one must not explicitly set height or padding for the A elements. Doing that would cause the "natural" height to not be what we need it to be.

The result is like this:

enter image description here

To see it in action, go here.

Upvotes: 0

Related Questions