刚学html和css想问下各位,为什么文字居中了图片不居中?

<!DOCTYPE html>
<html>
<head>

<title></title>
<style type="text/css">
    div{
        width: 200px;
        height:200px;
        background-color: pink;
    }
    img{
        text-align: center;
    }
    h1{
        text-align: center;
    }
</style>

</head>
<body>
<div>

<img src="img/blue-camera.png">
<h1>火箭总冠军</h1>

</div>
</body>
</html>

把img里的text-align:center;写在div里图片就居中了!这是为什么?不是子元素居中为什么要写在父元素里啊

阅读 3.4k
4 个回答

我知道了,img是内联块状元素,text-align:center作用的是块状元素内的内容

emmmm...怎么说呢,img是单标签,h1.div等等都是双标签,下面可以按需嵌套子标签,单标签是不能嵌套子集的,所以它自己相对于父集的 居中就需要写在父元素上了

text-align: center的意思是使该元素内部的行内元素居中。
img一种特殊的行内元素,我们暂且将其视为行内元素。这样,设置divcenter即设置了图片在容器中居中。
就像文字在h标签中居中一样。

text-align 属性规定元素中的文本的水平对齐方式。是“文本”的对齐方式
故用在img上无效

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题