问答详情
源自：15-2 水平居中设置-定宽块状元素

块状元素用text-align:center设置居中不起作用吗，那为什么15-1中div起作用了嘛，div难道不是块状元素？请看下面代码（或15-1代码）

<!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>


提问者：孤行者andy 2015-08-24 15:55

个回答

  • 一个人的寂静时光
    2016-05-25 10:45:46

    楼上正解，我刚实验过，text-align只是让文字元素居中，margin：auto是让整个边框加文字居中

    3
  • 慕后端0261656
    2015-09-08 12:07:34

    你弄混了，text-align是让块状里面的元素（比如文字）居中或者上下移。

    而这个margin是直接让块状 居中

    0
  • uhelper_net
    2015-08-25 18:17:18

    块状是起作用的,行内元素是不起作用的.

    0
  • qq_听说_0
    2015-08-25 10:24:52


    <!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>

    你跑一下这段代码，应该就明白了


    0
  • qq_听说_0
    2015-08-24 16:24:44

    http://img.mukewang.com/55dad4b40001d62a15960418.jpg跑了一下你的代码，你说的是这样的居中吗


    1