CODEWITHSUNDEEP
htmlcss
Narabhut
Narabhut

Reputation: 837

Vertically aligning text inside a span

JSFiddle here - http://jsfiddle.net/2R36y/

Relevant span code -

CSS

nav ul li a span {
    font: 30px"Dosis", sans-serif;
    text-transform: uppercase;
    position: relative;
    left: 120px;
    width: inherit;
    height: inherit;
    display: none;
    text-align: left;
}

HTML

<nav>
    <ul>
        <li> <a href="#">
                <span>Home</span>
            </a>
        </li>
        <li> <a href="#">
                <span>About</span>
            </a>
        </li>
        <li> <a href="#">
                <span>Portfolio</span>
            </a>
        </li>
        <li> <a href="#">
                <span>Contact</span>
            </a>
        </li>
    </ul>
</nav>

Upvotes: 7

Views: 18238

Answers (2)

Adrift
Adrift

Reputation: 59859

One way is by using display: table-cell; and vertical-align: middle; - you can also use line-height since the <span> has a fixed height.

nav ul li a:hover span {
    font: 30px"Dosis", sans-serif;
    text-transform: uppercase;
    position: relative;
    left: 120px;
    width: inherit;
    height: inherit;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

http://jsfiddle.net/2R36y/1/

Upvotes: 6

Stan
Stan

Reputation: 85

Use display:table.

nav ul li {
    list-style: none;
    margin: 0 0 0 0;
    display: table; 
}

nav ul li a:hover span {
    display: table-cell;
    vertical-align: middle;
    background-color: #000000;
}

Upvotes: 0

Related Questions