问答详情
源自：15-1 水平居中设置-行内元素

为何文字“图片”无法居中

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>定宽块状元素水平居中</title>

<style>

div{

    border:1px solid red;

    margin:20px;

}

.txtCenter{

text-align:center;

}

.imgCenter{text-align:center;}

#picture{text-align:center;}

</style>

</head>


<body>

<div class="txtCenter">我想要在父容器中水平居中显示。</div>


<!--下面是任务部分-->


<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="小李"/></div>

<span id="picture">图片</span>

</body>

</html>


提问者：慕瓜8442026 2017-06-05 11:18

个回答

  • 重阳孑
    2017-06-05 11:33:01
    已采纳

    因为你的文字“图片”那个span没有任何父元素，你可以把它放到class=“imgCenter”的div里面去，它就会居中了，谢谢

    0
  • 慕的地9276089
    2017-06-15 11:55:40

    span不是标签元素，没有确切的含义。可以把span改成p标签，css那部分定义一个p就行：

    p{text-align:center;}

    </style>

    </head>

    <body>

    <div class="txtCenter">我想要在父容器中水平居中显示。</div>

    <!--下面是任务部分-->

    <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="小李"/><span id="picture">图片</span></div>

    <p>tupian</p>

    </body>


    0