2

このフィドルで：http://jsfiddle.net/H4F8H/16/

外側のdivをラップして中央に配置することで、2つのdivを中央に配置しようとしています:

<div style="margin-left:auto;margin-right:auto;">

しかし、div は左揃えのままです。これらの div をページの中央に配置するにはどうすればよいですか?

フィドルコード:

HTML :

<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />


<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
<a href="http://www.google.com">Google</a>
</div>

</div>

<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />


<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
<a href="http://www.google.com">Google</a>
</div>

</div>
</div>

CSS :

*{
    margin:0;
    padding:0;
}
#block { 
    margin-right:100px;
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: WHITE; 
    width: 100px; 
    text-align: center; 
    line-height:30px;
    padding:3px 0;
    float:left;
}
img{
float:left;
}
#block:hover {
  background-color: #C2DFFF ;
}
4

7 に答える 7

1

divはデフォルトでブロック レベルの要素であるため、一部を割り当てないと水平方向のスペースの 100% を占めるため、コンテナwidthに一部を割り当てる必要があります。width

<div style="margin-left:auto;margin-right:auto; width: 300px;">

ここでは、それに応じて幅を設定できます。inlineまた、 CSS の使用も避けてください。

あなたのCSSは少しずさんです。たとえば、margin-right:100px;必要ありません。また、次のような省略形を使用できます

margin: 0 auto;=margin-left:auto; margin-right:auto;

デモ(境界を示すためだけに赤い境界線を追加)

注:要素をフローティングしているため、<div style="clear: both;"></div>提供されたデモで既に行った方法を使用してフロートをクリアしてください。それ以外の場合は、以下のスニペットを使用して、次のように親を自己クリアすることもできます。

.clear:after {
   display: table;
   clear: both;
   content: "";
}
于 2013-08-26T11:24:11.193 に答える
0

そのコンテナに幅を与えます。

#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
于 2013-08-26T11:22:59.063 に答える
0

margin:auto;幅が指定されていないと機能しません...

<div style="margin:auto;width:100px;">

your content here. [Replace the width with your choice]

</div>
于 2013-08-26T11:31:48.770 に答える
-1

このような

デモ

CSS

.container{
    width:960px;
    margin:0 auto;
    text-align:center;
    border:1px solid red;

}
于 2013-08-26T11:28:58.817 に答える