我们进行页面开发的时候,最经常用的就是div标签了,那么div中的内容如何居中显示呢,下面我给大家分享一下。
工具/材料SublimeText
首先我们用sublime先创建一个html,并且在html里面加入div,如下图所示
然后我们在div中加入一些文字,如下图所示,文字用span包裹起来
运行页面程序以后我们会看到文字在div的左上角,并没有居中的效果,如下图所示
接下来我们就需要用CSS给div中的内容设置居中了,如下图所示,通过text-align和line-height实现
最后运行界面程序,我们看到div中的内容这次水平和垂直都居中了,如下图所示
主要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 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>CSS使div居中制作</title>
<style>
body{ text-align:center}
#nav{ margin:0 autowidth:200pxheight:150pxborder: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居中的方法。