css中设置div居中显示的方法

html-css027

css中设置div居中显示的方法,第1张

我们进行页面开发的时候,最经常用的就是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居中的方法。