孤行者andy
2015-08-24 15:55
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定宽块状元素水平居中</title>
<style type="text/css">
div{border:1px solid red;margin:20px;}
div{text-align:center;}
</style>
</head>
<body>
<div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div>
<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>
</html>
楼上正解,我刚实验过,text-align只是让文字元素居中,margin:auto是让整个边框加文字居中
你弄混了,text-align是让块状里面的元素(比如文字)居中或者上下移。
而这个margin是直接让块状 居中
块状是起作用的,行内元素是不起作用的.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定宽块状元素水平居中</title>
<style type="text/css">
.txtCenter{border:1px solid red;text-align: center;}
.imgCenter{text-align: center;}
</style>
</head>
<body>
<div class="txtCenter">
<div class="noCenter" style="width:100px;height:100px;border:1px solid blue"></div>
</div>
<div class="imgCenter">
<div>
<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" />
</div>
</div>
</body>
</html>
你跑一下这段代码,应该就明白了
跑了一下你的代码,你说的是这样的居中吗
初识HTML(5)+CSS(3)-升级版
1225297 学习 · 18230 问题
相似问题