为什么我不能居中div？

我似乎无法居中底部div。（middle9）。为什么我不能居中div？

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 -->

来源

2016-02-11 ghp1968

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

来源

2016-02-11 22:51:48 jonode

开运片断全屏显示。我不认为是所有人都在寻找。 – BenG

最简单的方法（不float）：

#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; }

<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 -->

如果您divs显示器inline-block，他们将遵循同样的流程，他们与物业texte-align:center由中心#wrap9。

来源

2016-02-11 22:52:37 n1c01a5

看起来你已经完成，在包6和包7 您没有为包裹9.

定义什么，我只想让一个类，这样你就可以重复使用代码:) :)

来源

2016-02-11 22:53:00 wonghenry

你缺少ID选择#关闭的CSS为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 -->

来源

2016-02-11 22:53:18 gavgrif

谢谢 - 一个容易错过的事情。我也可能建议@ ghp1968调查使用Bootstrap或其他框架，以使div响应。举例来说，一个col-md-4类会为更宽的视口水平显示它们，并将它们垂直堆叠在较小的视口中。仍然需要css来控制边距和填充，但会允许使用移动版本。只是一个想法。 :) – gavgrif

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

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

来源

2016-02-11 22:55:16 Ber

你忘了添加#wrap9它添加如下

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

来源

2016-02-11 22:55:23 Microsmsm

感谢您的所有意见...非常感激。 – ghp1968

我知道这是非常令人沮丧居中DIV，因为他们没有对齐：“中心”标签在HTML5中继续工作。你也可以尝试这个中心对齐整个网页。

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

将下面的CSS应用到它。

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

显然，您可以根据需要更改宽度。关键部分是将边距设置为“自动”。

如果要控制左右边距，请将上述“边距”属性替换为以下值。

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

来源

2016-02-11 23:33:35

为什么我不能居中div？

回答

相关问题