10

I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use line-height.

HTML

<nav>
    <ul>
        <li><a href="html/login.html">Login</a></li>
        <li><a href="html/user_registration.html">Register</a></li>
        <li><a href="#">Programmes Offered</a></li>
    </ul>
</nav> 

CSS

nav
{
    height: 30%;
    width: 100%;
}

nav ul
{
    height: 100%;
    margin: 0px;
}

nav ul li
{
    height: 33%;
    width: 100%;
    vertical-align: middle;
}

4 Answers 4

13

you may use a pseudo element displayed as an inline-box using full height of li and vertical-aligned to midlle. DEMO

body, html {
    height:100%; /* needed for demo */
}
nav {
    height: 50%; /* increased for demo */
    width: 100%;
}
nav ul {
    height: 100%;
    margin: 0px;
}
nav ul li {
    height: 33%;
    box-shadow:inset 0 0 0 1px; /* show me li , for demo */
}
nav ul li:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align: middle;
}

edit

If you also reset display and vertical-align on <a>, links can be spread on a few lines (demo below):

body,
html {
  height: 100%;
}

nav {
  height: 70%; /* height set for snippet demo purpose, could be really too much  */
  width: 100%;
}

nav ul {
  height: 100%; /* will follow height, inherit height value , set in nav if any avalaible  */
  margin: 0px;
}

nav ul li {
  height: 33%;
  /* see me and my center*/
  box-shadow: inset 0 0 0 1px;
  background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);
}

nav ul li:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

a {
  display: inline-block;
  vertical-align: middle;
}
<nav>
  <ul>
    <li><a href="html/login.html">Login</a>
    </li>
    <li><a href="html/user_registration.html">Register</a>
    </li>
    <li><a href="#">Programmes<br/> Offered</a>
    </li>
  </ul>
</nav>

2
  • This worked. However, I'm not familiar with the content property, I guess my day isn't over yet. Thank you.
    – Kis
    Jun 22, 2014 at 13:55
  • I don't know why, but I had to up mine to height: 110%. I was trying to vertically center the text in an anchor tag that's absolutely positioned, and the psuedo-class :before trick worked! Thanks!! Was taking far too long to accomplish that. Jul 1, 2015 at 15:34
5

If you can use flexbox, you can get away with the following css:

CSS

ul li a {
    display:flex; // Enables flexbox 
    justify-content: center; // Center on main axis
    align-items: center; // Center on cross axis
}

Update ( using auto margins )

You can also do it like this:

ul li { display:flex }
li a { margin: auto }

/* These rules are just to make things easier to see. */

nav {
  margin: 0 auto;
  margin-top: 5rem;
  border: 1px dotted green;
  width: 100%;
}

ul {
  padding: 0;
  display: flex;
  justify-content: space-around;
}

li {
  height: 3rem;
  padding: 2rem;
  border: 1px dotted red;
}


/* Here are what I am trying to illustrate */

ul li {
  display: flex;
}

a {
  margin: auto;
  /* or adjust them one by one, by targeting 
     the ones you want and setting
     using each margin like this:
  
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
  */
}
<nav>
  <ul>
    <li><a href="html/login.html">Login</a></li>
    <li><a href="html/user_registration.html">Register</a></li>
    <li><a href="#">Programmes Offered</a></li>
  </ul>
</nav>

1

vertical-align aligns inline elements with their siblings.. unless used in a table cell.

I don't think there's a by-the-book way of vertically aligning.. but this should work:

D E M O

nav ul li
{
    background:#f1f1f1;
    height: 33%;
    width: 100%;
    border-top:1px solid #e0e0e0;
}

nav ul li a
{
    display:block;
    position:relative;
    top:50%;
    -webkit-transform:translate(0,-50%);
    -moz-transform:translate(0,-50%);
    transform:translate(0,-50%);

}
3
  • I'm afraid that doesn't work. I was hoping for a simpler method that wouldn't involve transforms. Nevertheless, it hasn't worked. Vertical-alignment is such a bother ... I had no idea.
    – Kis
    Jun 22, 2014 at 13:48
  • @Kis have you looked at the jsfiddle demo in the answer?
    – webkit
    Jun 22, 2014 at 13:54
  • whoops I forgot to add support to browsers that aren't chrome.. I'll update the answer to this.. jsfiddle.net/RGeWL/3
    – webkit
    Jun 22, 2014 at 13:57
0

Have you tried with

nav ul li a
{
    height: 33%;
    width: 100%;
    vertical-align: 5px; //(you can make it 10px or -10px, just so it fits your style)
}

Your text is within the a tag, so adding a in the css may solve your problem :)

6
  • this won't work.. it won't vertically align the A tag to the height of the LI
    – webkit
    Jun 22, 2014 at 13:46
  • What do you want to do actually , I don't get it ?
    – DareDev1l
    Jun 22, 2014 at 13:49
  • I had tried it earlier and i didn't work. Ive just tried it again for a peace of mind but it still doesn't work.
    – Kis
    Jun 22, 2014 at 13:49
  • I want my text to appear in the middle, currently its sticking at the top.
    – Kis
    Jun 22, 2014 at 13:50
  • You can use vertical-align: 5px; (You can do 10px, -10px, just align it so it sticks where you want, I think this will work for you). P.P I edited my code up so you can see
    – DareDev1l
    Jun 22, 2014 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.