0

我如何将主 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/

4

4 回答 4

1

利用 ：

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

您在div.new-div.

请参阅更新的小提琴。

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

.social-slide {
    display:inline-block;
    *display:inline;
    *zoom:1;
}
于 2013-09-10T08:48:17.037 回答
0

add text-align:center; to div.newdiv

Also you are missing a " in your html. 

<div class="newdiv>

should be:

<div class="newdiv">
于 2013-09-10T08:50:15.810 回答
0 
div.newdiv {
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}

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

于 2013-09-10T09:07:21.720 回答
0 
.newdiv 
{
margin-left: auto;
margin-right: auto;
width:900px;
}
于 2013-09-10T08:48:03.203 回答