Question

我似乎无法将底部div放在中心位置。（middle9）。

HTML和CSS似乎与上面的代码相同。

如果很明显，我会事先道歉，但我看不到它。

http://www.garyhornephotography.com/str/index.html

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { float:right; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

Answer 1

您错过了#的css中的ID选择器wrap9 - 试试这个

#wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { float:right; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

Answer 2

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { float:left; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { float:left; display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

将它们全部向左漂浮。：d

Answer 3

简单的方法（没有float）：

＆＃13;

#wrap9 { width: 900px; height: 300px; background-color:#F67E07; text-align:center; margin: 3px auto 0 auto;}

#sub_left9 { display:inline-block; width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

＆＃13;

<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

＆＃13;

如果您的divs显示inline-block，则它们将遵循相同的流程，并且texte-align:center位于#wrap9的中心位置。

Answer 4

看起来你已经在wrap 6和wrap 7中完成了。你没有为wrap 9定义任何东西。

我只是把它变成一个类，所以你可以重用代码:)：）

Answer 5

#sub_right9 {
margin-left: auto; margin-right: auto; left: 0; right: 0; position: relative; float: none; 
}

Floating从文档的正常流中获取一个元素，并且没有中心浮点值。因此，您需要将CSS替换为上面的内容，以告诉“正确的9”绿色块与页面中心对齐。

Answer 6

您忘记添加#wrap9按如下方式添加

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

Answer 7

我知道将div放在中心可能会非常令人沮丧，因为他们没有对齐：“中心”标签在HTML5中不再工作了。您也可以尝试将中心对齐整个网页。

这是将div标记居中的最简单方法。

将以下CSS应用于它。

#divInner {
    width: 50%; 
    margin: 0 auto; 
}

显然你可以根据需要改变宽度。关键部分是将保证金设置为“自动”。

如果您想控制左右边距，请用以下内容替换上述“margin”属性。

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

为什么我不能将div居中？

7 个答案: