How do I vertically align text inside an anchor element, which is nested within an unordered list


Tags: css,css3,html-lists,anchor,vertical-alignment

Problem :

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


Solution :

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

    CSS Howto..

    How to remove a class as each image is loaded

    How to fix text with limited height and absolute position overflows

    How to do HTML/CSS form helpers/popover

    How to make a split screen video with full height?

    How can I remove a bootstrap buttons hover effect?

    How can I change a table td width using CSS in Spiceworks?

    How to force the casing of letters in a textbox

    How to set the maximum height of CSS tables?

    How can i add a css rule for this code?

    How to make one side of a div pointy with CSS?

    HTML: How to change the width of input field based on container size

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    How to keep an :active css style after clicking a link?

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to center a ul CSS

    jQuery Mobile - How to change the css classes to be applied when i use a data-attribute?

    How to use jQuery's flag to swap CSS display property

    How to view embedded image in a CSS file

    How to align a div to lower left corner in css

    How to find all elements with a particular CSS style, without a JS library?

    How to animate my header to slide in horizontally from left to page view on load?

    HTML - How to put text over a white background over a background image

    How do I properly set width to a percentile and keep a min-width in pixels?

    How can I keep percentage-based elements from overlapping?

    CSS, how to align a button vertically next to large images

    How to set parent div height to self adapt to the inner div height?

    how to create an anchor point

    How do i move this block?

    How to Link to Images in CSS file in RoR 3.2 Project?

    How do I switch external CSS files?