html - 将包含另一个带有内联 block 的 div 的 div 居中

Question

我如何将主 DIV 居中，其中包含另一个具有内联 block 的 div。

<div class="newdiv>
    <a href="http://www.twitter.com" target="_blank"><div class="pinterest-hover social-slide"></div></a>
    <a href="http://www.twitter.com" target="_blank"><div class="instagram-hover social-slide"></div></a>
    <a href="http://www.twitter.com" target="_blank"><div class="reddit-hover social-slide"></div></a>
    <a href="http://www.twitter.com" target="_blank"><div class="rss-hover social-slide"></div></a>
</div>

CSS:

.stumbleupon-hover {
    background-image: url('icons/stumbleupon-hover.png');
}

.social-slide {
    height: 48px;
    width: 48px;
    border:3px solid;
    /*margin: 10px;*/
    display:inline-block;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-slide:hover {
    background-position: 0px -48px;
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
    /*box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8);*/
}

div.newdiv {
    margin: 0 auto 0 auto;
}

基本上我想通过 newdiv 将社交图标居中 JSFiddle:http://jsfiddle.net/uWaPy/

Answer 1

使用:

div.new-div {
    text-align:center;
}

div.new-div 中缺少一个 "。

参见 updated fiddle .

IE < 8 不喜欢 inline-block，有一个 hack:

.social-slide {
    display:inline-block;
    *display:inline;
    *zoom:1;
}