CODEWITHSUNDEEP
htmlcss
Xyzk
Xyzk

Reputation: 1342

How to vertically align elements in horizontal list

I have horizontal list, the problem is first element in that list is bigger then the rest. And so, I get something like this.

How can I align other elements so that they are "centered" vertically? Mind you, I don't want to make the other li elements bigger (or higher), and I know I can do it manually by specifying the top and bottom margins, but I would like to avoid it.

jsfiddle code:

<div id="contentDiv">
            <div id="topMenu">
                <ul>
                    <li id='top_logo'></li>
                    <li>
                        1
                    </li>
                    <li>
                        2
                    </li>
                    <li>
                        3
                    </li>
                </ul>
                <br style="clear:both" />
            </div>

style:

#topMenu ul li {
/* box size */
width: auto;
display: table;
float: left;
padding: 8px 10px 8px 10px;
margin: 5px;
/* color */
background-color:blue;
}


#top_logo{
background-color:red!important;
width:200px !important;
height:60px !important;
}

Upvotes: 0

Views: 60

Answers (1)

Steve Adams
Steve Adams

Reputation: 2837

I often use line-height in cases like this. In this case, setting it to the height of the container (60px) (edit: Not the container specifically, but the height of whatever element you want the list to be vertically centred with) will yield a vertically centred list item.

line-height: 60px;

Here's an example forked from your example: http://jsfiddle.net/EPCEs/1/

Upvotes: 1

Related Questions