CODEWITHSUNDEEP
cssimagehtml
Luisse
Luisse

Reputation: 33

Horizontally center link images within a vertical menu

Struggling to learn html/css I came up to a problem with multiple solutions, but I have no ideea which is the best solution for a clear and right code.

I want to horizontally center the links (images) inside a vertical menu. This menu must be contained within a div with fixed height and width - #menu. I will use the #menu's height to push down another div.

I searched the web and found a lot of ways to do this: the UL using directly and id without any div containing it, a div containing the UL, even only just the div and ul in the css without any formatting for ul li or ul li a. My brains are a total mess now. At some point I decided on this, but I am pretty sure that this isn't the best and simple way to do it:

http://jsfiddle.net/luisse/hpLQ6/

html code:

<div id="content">
<div id="menu">
<ul>
<li><a href="#"><img src="http://i.imgur.com/Cgl5XKV.jpg"></a></li>
<li><a href="#"><img src="http://i.imgur.com/Gk93KeN.jpg"></a></li>
<li><a href="#"><img src="http://i.imgur.com/iIk5FoO.jpg"></a></li>
</ul>
</div>
</div>

CSS:

html, body {
height: 100%;
padding: 0;
margin: 5px;
}
body {
background-color:black;
}
* {
margin: 0;
padding: 0;
}


#content {
background-color: #999999;
height: 600px;
width: 100px;
}


#menu {
background-color: #C0C0C0;
width: 60px;
height: 120px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style: none;
width: 60px;
display: table;
}
ul li {
height: 20px;
margin-top: 10px;
}
ul li a {
text-decoration: none;
}

Could you please advise me what it's the best way to do it? Thanks.

Upvotes: 0

Views: 91

Answers (1)

Gavin Pickin
Gavin Pickin

Reputation: 742

you can set an li to center all its content. That is all you need to center the links.

ul li {
    text-align:center; 
}

Although, a UL gets some margin in browsers by default, so adding the following to the ul gets rid of the strange margin it has.

ul {
    margin:0px;
}

Upvotes: 1

Related Questions