2

I am having trouble centering list items horizontally within a container div. I have tried to use display:inline on the li and li a but this did not help. I also tried text-align center on the ul and the li which did not give me results. My solution is almost there however if I remove the two arrow LI's from the HTML it breaks and looks like the second image posted here instead of automatically centering the social media icons. I have borders around everything right now for troubleshooting purposes.

Ideally, if I remove an arrow or a facebook list item, the others should continue to center within the container. I am a bit confused on how to achieve what I want after trying float and the display:inline-block and inline method and having little results. I was able to achieve what I want with plain text by using display:inline, however these need to be background images and the arrows have a different width than the social media icons. (could be turned into a sprite as well I suppose instead of individual ones)

HTML:

 <div id="socialbox">
    <ul id="social">
      <li id="leftarrow"><a></a></li>
      <li id="facebook"><a href=""></a></li>
      <li id="twitter"><a href=""></a></li>
      <li id="youtube"><a href=""></a></li>
      <li id="rightarrow"><a></a></li>
    </ul>
</div>

CSS:

#socialbox {width:400px; border:1px solid black; margin:0 auto; margin-top:0px; }
#social{overflow:auto; border:1px solid blue;}
#social ul {list-style:none; margin:0 auto;}
#social li{float:left; margin-right:15px;border:1px solid red;}
#social li, #social a{height:53px;display:block;}

#leftarrow{width:30px; border:0px solid black; background:url('../img/leftarrow.png')no-repeat 0 0px;}
#leftarrow a:hover{background: url('../img/leftarrow-hover.png')no-repeat 0 0;}

#rightarrow{left:0px;width:30px; border:0px solid black;background:url('../img/rightarrow.png')no-repeat 0 0px;}
#rightarrow a:hover{background: url('../img/rightarrow-hover.png')no-repeat 0 0;}

#facebook{width:62px; border:0px solid black; background:url('../img/facebook.png') 0 0}
#facebook a:hover{background: url('../img/facebook-on.png') 0 0;}

The image below is what my soluton currently looks like, which it is actual 2 pixels on the left side to little, isntead of centered.

4

2 回答 2

0

does adding text-align:center to socialbox do anything?

于 2013-05-08T18:59:43.313 回答
0

There are two issues, I can see

  • You have a selector #social ul, which should be just #social or ul. Otherwise it doesn't apply to <ul id="social">
  • ul is a block level element, so it extends to the whole width - as can be seen by the blue border - and margin: auto has no effect. For this to work, you can set a width, which encloses the children and adjust the padding accordingly 
#social {
    width: 240px;
    list-style:none;
    margin:0 auto;
    padding-left: 20px;
}

JSFiddle for testing.

As an alternative, you can increase the margin of the leftmost child, e.g. facebook.

Update:

If you want to avoid setting the width, you can use @ajgiv's suggestion and add text-align: center to the outer div socialbox. But then, you must also make social an inline element by setting display: inline-block 

#socialbox {
    text-align: center;
}

#social {
    display: inline-block;
    padding-left: 15px;
}

See JSFiddle

于 2013-05-08T19:43:07.073 回答