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> 这个简单。把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>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
682
收藏
