CODEWITHSUNDEEP
htmlhtml-listsvertical-alignmentcss
calebo
calebo

Reputation: 3442

Vertical align text on inline list items

I have an inline list of elements, the elements within the list can sometimes be image or text. The image is always the same height as the list, but how can I vertical align text within the list?

http://jsfiddle.net/qvuCm/

Note: The mark-up can't be changed.

Looking to do this with CSS only, no JavaScript.

Upvotes: 1

Views: 11268

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

If you set the a style to display: table-cell, you can use vertical-align (http://jsfiddle.net/whm8X/) e.g. :

a {
    display: block;
    height: 80px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;
}

Upvotes: 0

N1ck
N1ck

Reputation: 2001

Made the following changes:

ul li a img{
    display:block;
}


a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
    display:table-cell;
    vertical-align: middle;
    width:100px;
    height:80px;
}

http://jsfiddle.net/qvuCm/12/

Upvotes: 2

Related Questions