HTML布局排版2如何设置div老是相对于页面居中

2021年09月15日 阅读数:1
这篇文章主要向大家介绍HTML布局排版2如何设置div老是相对于页面居中,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

因为浏览器页面有大有小,为了适应浏览器宽度,可让div老是对于浏览器居中,设置div左右两边的margin为auto能够实现这个效果。
如图,第一个是默认div,无上下左右外边距,第二个是设置了margin为auto的,拖动浏览器,改变浏览器大小,能够看到第二个div老是相对于浏览器居中
测试代码:浏览器

<body>
<div id="body">
<div id="bodyleft" style="background-image:url(images/t1.png);width:790px;height:25px;"></div>
<div id="bodymiddle" style="background-image:url(images/t2.png);width:790px;text-align:center;">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
<div id="bodyright" style="background-image:url(images/t3.png);width:790px;height:25px;"></div>

<div id="body2">
<div id="bodyleft" style="background-image:url(images/t1.png);width:790px;height:25px;margin:auto;"></div>
<div id="bodymiddle" style="background-image:url(images/t2.png);width:790px;text-align:center;margin:auto;">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
<div id="bodyright" style="background-image:url(images/t3.png);width:790px;height:25px;margin:auto;"></div>
</div>
</body>

图示:测试