< 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 >
<img src="img/blue-camera.png">
<h1></h1>
< / div >
< / body >
< / html >
write the text-align:center; in img in div and the picture is in the middle! Why is that? If the child element is not centered, why should it be written in the parent element
emmmm. How to say, img is a single tag, h1.div and so on are double tags, the following child tags can be nested as needed, a single tag cannot nest a subset, so it needs to be written on the parent element
text-align: center means to center the element inside the line.
and img is a special inline element, which we think of as an inline element for the time being. Thus, setting div to center sets the picture to be centered in the container.
is like text centered in the h tag. The
text-align attribute specifies the horizontal alignment of the text in the element. It is the alignment of "text"
so it is not valid on img
I see. Img is an inline block element, and text-align:center acts on the content within a block element
