1

CSS:

.homeBar li {
    float: center;
    display: inline;
    text-align: center;
    font-family: Tahoma;
    font-size: 13px;
    list-style: none;
}
.homeBar img {
    color: #94938e;
    margin-right: 30px;
    text-decoration: none;

}

HTML:

<ul class="homeBar">
    <li><a href="#"><img src="images/friends.png"></a></li>
    <li><a href="#"><img src="images/mail.png"></a></li>
</ul>

as you can see i tried float: center, but it wont center it..

Richard JP Le Guen
  • 28,364
  • 7
  • 89
  • 119
Karem
  • 17,615
  • 72
  • 178
  • 278

1 Answers1

0

If the widths of your elements (and thus, your list) are known, you could display the list as inline-block, and apply auto margins to it:

.homeBar li {
    width: /* Full width (calculate it manually) */;
    display: inline-block;
    margin: 0 auto;
}

The width used should be the width of the images, plus padding and margin, after any margin collapse.

You
  • 22,800
  • 3
  • 51
  • 64
  • cant get this to center, i did 157px ( 48 x 2 + 60px padding) and it just goes alittle to the right.. – Karem Aug 08 '10 at 23:52
  • That might be because *both* your `
  • ` elements have a right margin — that means the last one will have 30px of empty space to its right which affect the centering. Apply a border to your `
      ` and you'll see that it is in fact centered.
    • – You Aug 09 '10 at 00:01
  • No its not centered. I even tried removing the margin-right but no results at all – Karem Aug 09 '10 at 00:06
  • There's also the fact that 2x48+60≠157 — the correct value would be 156, or 126 if you omit margin on the rightmost `
  • `. It *will* be centered **in the parent element**. Make sure your parent element is as wide as the area in which you want your `
      ` centered.
    • – You Aug 09 '10 at 00:21