The width of the layer is uncertain, how to center it in the parent layer? _html/css

The width of the layer is uncertain, how to center it in the parent layer? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:25:06

Original

1079 people have browsed it

Undefined width of layer 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>

Copy after login

Reply to discussion (solution)

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

Copy after login

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

Copy after login

text-align:center

This is simple. Centering can also be achieved by removing the width of layer 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>

Copy after login

You can limit the maximum width of layer B through max-width. Of course, you can also limit it. If not, the maximum width will be as wide as layer A.

This is simple. Centering can also be achieved by removing the width of layer 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>

Copy after login

You can limit the maximum width of layer B through max-width. Of course, you can also limit it. If not, the maximum width will be as wide as layer A.
It turns out it can still be like this! ! Thank you