DIV居中提供两个方法：
1、简单快捷方法就是加<center>内容</center>标签。
示例：
<html><head>
<meta ;
2、div中加入margin:0 auto属性;自动调节居中。
示例：<html>
<head>
<meta >
主要css代码有两个：
1,text-align:center
2,margin:0 auto；
其两个样式需要配合使用才能实现div盒子的居中显示排版。
首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平居中。
举个例子，居中代码为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
<html xmlns=">
<head>
<meta >
<title>CSS使div居中制作</title>
<style>
body{ text-align:center}
#nav{ margin:0 auto; width:200px; height:150px; border:5px double #FF0066;}
/ css注释：为了观察效果设置宽度 高度 边框等样式 /
</style>
</head>
<body>
<div id="nav">
DIV居中
</div>
</body>
</html>
为了观察div居中效果，我们对div设置一个div命名为“#div”在html中div标签内使用id=“nav”,设置其宽度为200px;高度为150px，边框也设置了颜色。
效果如图：
以上就是CSS让DIV居中的方法。
方法如下：
在布局一张网页时，通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。假如最外层DIV盒子的CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子居中。
一条件：
这个时候对“body”设置css内容居中样式（text-align:center）
即CSS代码：body{text-align:center}
一设置：
这个时候对“#divcss5”设置居中必备样式css margin
即CSS代码：#divcss5{margin:0 auto}
为了便于观察布局居中效果，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px样式。
最终得到DIV居中的CSS代码：
body{ text-align:center}
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}
对应html代码片段：
<div id="divcss5">DIV水平居中案例</div>
居中案例截图
CSS中设置文字右对齐可以通过代码：<p align="对齐方式">文本段落</p>来实现， *** 作步骤如下：
1新建一个html文档，如下图红框所示；
2可以给文档改个名字，如下图红框所示；
3然后在<body>和</body>之间输入文字内容，如下图红框所示；
4进一步设置以下文字的对齐方式，示例代码如下：<p align="center">孔雀为什么要东南飞？</p>；
5在浏览器中预览，文字就实现了右对齐，如下图红框所示；
div里面的div居中方法：
一条件：
这个时候对“body”设置css内容居中样式（text-align:center）
即CSS代码：
body{text-align:center}一 设置：
这个时候对“#divcss”设置居中必备样式css margin
即CSS代码：
二、DIV居中用法实例
为了便于观察布局居中效果，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px样式。
1、最终得到DIV居中的CSS代码：
body{ text-align:center}#divcss{margin:0 auto;border:1px solid #000;width:300px;height:100px}
2、对应html代码片段：
<div id="divcss">DIV水平居中案例</div>3、居中案例截图
4、在线演示：
三、布局居中总结
布局居中我们需要对对象加margin:0 auto样式，当然如果不加有的浏览器会实现居中效果，但有的浏览器就不会默认是居中。为了div居中兼容各大浏览器，一定遵循以上教程方法与实施教程。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）