为什么我不能居中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 -->
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
最简单的方法(不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
。
看起来你已经完成,在包6和包7 您没有为包裹9.
定义什么,我只想让一个类,这样你就可以重复使用代码:) :)
你缺少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 -->
谢谢 - 一个容易错过的事情。我也可能建议@ 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”绿色块对齐页面中心。
你忘了添加#wrap9
它添加如下
wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }
感谢您的所有意见...非常感激。 – ghp1968
我知道这是非常令人沮丧居中DIV,因为他们没有对齐:“中心”标签在HTML5中继续工作。你也可以尝试这个中心对齐整个网页。
这是居中任何div标记的最简单方法。
将下面的CSS应用到它。
#divInner {
width: 50%;
margin: 0 auto;
}
显然,您可以根据需要更改宽度。关键部分是将边距设置为“自动”。
如果要控制左右边距,请将上述“边距”属性替换为以下值。
margin-left: 0 auto;
margin-right: 0 auto;
开运片断全屏显示。我不认为是所有人都在寻找。 – BenG