图片不能水平居中

<!DOCTYPE html>
<html>
<head>
<metar charset="UTF-8">
<title>background</title>
<!--<link rel="stylesheet" href="./test.css" type="text/css">-->
<style type="text/css">
img {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-indent: 2em;
}
</style>
</head>
<body>
<img  src="./img/test.jpg">
<h2>超文本标记语言</h2>
<p>HTML(HyperTextMarkupLanguage)是超文本标记语言，他是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等。）</p>
</body>
</html>

老师您好，我用text-align:center;设置了图片居中，但为什么图片还是显示在左上角呢？

大江大河 2017-09-28

源自：CSS入门 4-5 编程练习

收起

2回答

imooc_澈 2017-09-28 19:28:45

您好，单独使用img,将它设置为块元素，则如下设置即可居中。

您好，您的理解正确，在你的代码中，使用div标签包裹，div块元素本身占一整行，img标签就是div块元素里的内容，此时使用text-align:center可以让img在div里居中，如下：

div{

text-align:center;

}

如果设定了div的宽高，并将图片百分百填充到div框里，那就直接用margin:0 auto；即可。

div{

width:200px;

height:200px;

margin:0 auto;

}

img{

width:100%;

height:100%;

}

margin:0 auto；用于使设定了固定宽高的块元素水平居中（因为块元素如果不设定固定宽高，默认占整行，不存在水平居中），img本身有图片默认宽高，成为块元素后使用margin:0 auto;也可以整个居中，如下：

img{

display:block;

margin:0 auto;

}

收起回答

imooc_澈 2017-09-28 16:58:04

您好，将img设置为块元素，然后使用margin：0 auto;来居中。如下：

img{

display:block;

margin:0 auto;

}

或者将img用一个div块标签包起来，然后使用margin:0 atuo；设置水平居中。

如果解决了您的问题，请采纳，祝学习愉快~

收起回答

提问者大江大河 #1

哦，这个问题是因为img是一个行内元素造成的对吧？所以要把img设置成块元素，或者用其他块元素包裹起来。我的理解对么，老师？

2017-09-28 17:56:47
提问者大江大河 #2

老师，试了一下，还是不行，图片还是显示在左上侧，下边是我的源码： <!DOCTYPE html> <html lang="en"> <head> <metar charset="UTF-8"> <title>background</title> <style type="text/css"> div > img { margin:0 auto; } h2 { text-align:center; } p { text-indent: 2em; } </style> </head> <body> <div> <img src="./img/test.jpg"> </div> <h2>超文本标记语言</h2> <p>HTML(HyperTextMarkupLanguage)是超文本标记语言，他是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等。）</p> </body> </html>

2017-09-28 18:03:27