层不确定宽度，怎么让他在父层中居中呢？_html/css

层不确定宽度，怎么让他在父层中居中呢？_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 12:25:06

原创

1024 人浏览过

b层不确定宽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>无标题文档</title></head><style type="text/css">	.a{ width:1000px; text-align:center;}	.b{ background:red; width:50px; height:50px; margin:0 auto;}</style><body><div class="a"><div class="b"></div></div></body></html>

登录后复制

回复讨论(解决方案)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>无标题文档</title></head><style type="text/css">    .a{ width:100%; text-align:center;}    .b{ background:red; width:50px; height:50px; margin:0 auto;}</style><body><div class="a"><div class="b"></div></div></body></html>

登录后复制

<style type="text/css">    .a{ width:1000px; text-align:center;}    .b{ background:red; width:50px; height:50px;  margin: auto; position: absolute;top: 0; left: 0; bottom: 0; right: 0;}</style>

登录后复制

text-align:center

这个简单。把B层的宽度去掉也一样可以实现居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>无标题文档</title></head><style type="text/css">	.a{ width:1000px; text-align:center;border:1px solid;}	.b{ background:red; display:inline-block;max-width:800px; height:50px; margin:0 auto;border:1px solid;}</style><body><div class="a"><div class="b">我是B层的内容哦！</div></div></body></html>

登录后复制

可以通过max-width来限制B层的最大宽度，当然也可以不限制，不限制的话，最大宽度就跟A层一样宽了。

这个简单。把B层的宽度去掉也一样可以实现居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>无标题文档</title></head><style type="text/css">	.a{ width:1000px; text-align:center;border:1px solid;}	.b{ background:red; display:inline-block;max-width:800px; height:50px; margin:0 auto;border:1px solid;}</style><body><div class="a"><div class="b">我是B层的内容哦！</div></div></body></html>

登录后复制

可以通过max-width来限制B层的最大宽度，当然也可以不限制，不限制的话，最大宽度就跟A层一样宽了。
原来还可以这样啊！！谢谢啊