如何使用CSS使DIV显示居中,以及有哪些CSS样式可以使div水平居中?
需要两个主要的CSS代码,一个是text-align:center(内容居中),另一个是margin:0auto;这两种样式需要一起使用才能实现div框的中心显示和布局。
首先,我们为主体设置text-align:center,然后为需要居中的div框设置css样式margin:0auto,以使相应的div可以水平居中。
该示例说明了div居中代码的应用。为了观察div居中效果,我们为div设置了一个名为“.div”的div,在html的div标签中使用class=“div”,将其宽度设置为400px;高度为100像素,边框为红色。这样我们就可以观察到效果了。
div居中对齐的css代码
1、div居中对齐条件与方法
只需要对要居中对齐的div样式加margin:0auto,不再需要加float样式。
因为float没有居中的浮动,所以我们需要去掉float样式,为了兼容各大浏览器让div居中对齐,我们需要对div对应样式加margin:0auto即可。
2、css+div布局完整HTML源代码:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>div对齐实例在线演示DIVCSS5</title>
<style>
.divcss5-cent{margin:0auto;width:250px;height:50px;border:1pxsolid#F00}
</style>
</head>
<body>
<divclass="divcss5-cent">此DIV居中右对齐显示</div>
</body>
</html>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。