Question

如何将主DIV居中，其中包含另一个具有内联块的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＆lt; 8不喜欢inline-block，有一个黑客：

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

Answer 2

.newdiv 
{
margin-left: auto;
margin-right: auto;
width:900px;
}

Answer 3

将text-align:center;添加到div.newdiv

你也错过了一个“在你的HTML中。

<div class="newdiv>

应该是：

<div class="newdiv">

Answer 4

div.newdiv {
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}

只需编辑此代码即可。在div标签中，它应该是<div class="newdiv">

将包含另一个带内联块的div的div居中

4 个答案: