CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 18859

Vertically align content in inline-block list items

I'm trying to display an unordered list horizontally. In each list item, I have an anchor tag with an image, that I'd like to display vertically aligned in the list item. Here's my

HTML:

<ul>
    <li>
        <a href="#">
            <img src="1.jpg" alt="" height="50" width="50" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="2.jpg" alt="" height="50" width="50" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="3.jpg" alt="" height="50" width="50" />
        </a>
    </li>
</ul>

CSS:

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    height: 93px;
}

ul li
{
    display: inline-block;
    width: 110px;
    height: 93px;
    text-align: center;
    vertical-align: middle;
}

What am I doing wrong here?

Upvotes: 7

Views: 21558

Answers (3)

Kyle
Kyle

Reputation: 11

display:inline-block; treats element as if they inline level, which means any whitespace in your markup is displayed when the page is rendered.

TRY:

<ul><li>
        <a href="#">
            <img src="1.jpg" alt="" height="50" width="50" />
        </a>
    </li><li>
        <a href="#">
            <img src="2.jpg" alt="" height="50" width="50" />
        </a>
    </li><li>
        <a href="#">
            <img src="3.jpg" alt="" height="50" width="50" />
        </a>
</li></ul>

OR:

<ul><!--
    --><li>
        <a href="#">
            <img src="1.jpg" alt="" height="50" width="50" />
        </a>
    </li><!--
    --><li>
        <a href="#">
            <img src="2.jpg" alt="" height="50" width="50" />
        </a>
    </li><!--
    --><li>
        <a href="#">
            <img src="3.jpg" alt="" height="50" width="50" />
        </a>
    </li><!--
--></ul>

Upvotes: 1

Kyle
Kyle

Reputation: 67194

Try floating the li's left. This will display them in a horizontal line and retain their block status

Upvotes: 6

Joe
Joe

Reputation: 82614

http://jsfiddle.net/zgxHB/1/

Try using display: table-cell; instead of display: inline-block;

Upvotes: 15

Related Questions