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。

更新された fiddleを参照してください。

IE < 8 は好きではありませんinline-block。ハックがあります。

.social-slide {
    display:inline-block;
    *display:inline;
    *zoom:1;
}
于 2013-09-10T08:48:17.037 に答える
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 に答える
0

text-align:center;に追加div.newdiv

また、html に " がありません。

<div class="newdiv>

次のようにする必要があります。

<div class="newdiv">
于 2013-09-10T08:50:15.810 に答える