CSS中怎么让DIV居中

 我来答
武汉肥猫科技
2016-12-24 · 武汉肥猫科技提供高端网站建设、SEO等服务
武汉肥猫科技
武汉肥猫网络科技有限公司,是一家集策划、设计、技术开发于一体的专业互联网产品服务公司,致力于为企业信息化提供驱动力。
向TA提问
展开全部

主要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/html; charset=gb2312" />

<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居中的方法。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式