レイヤーの幅が不明ですが、親レイヤーの中央に配置するにはどうすればよいですか? _html/css

レイヤーの幅が不明ですが、親レイヤーの中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:25:06

オリジナル

1088 人が閲覧しました

レイヤー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 と同じになります。
まだこのままかもしれないことが判明しました！！ありがとうございます