CSS: Centering an image. Why doesn't 'text-align: center'? - html

Question

I've got to center an image within a div-container with fixed sizes.
My first idea was: img is an inline-element. So you can use text-align: center. As with text.
But that doesn't work.
I've made this demo:
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
One can see: Text centering works perfectly. But image centering fails.
What did I do wrong here? Respectively: Which of my assumptions are wrong?

Answer 1

.wrap {
text-align: center;
}
use this

Answer 2

text-align affects the inline content of an element.
The image isn't the content of the <img>, it is the <img>.
For text-align to affect it, you must apply the property to the parent of the <img>.

Answer 3

hi img is inline eliment so you can not add text-align: center; to image
add parent div to check this
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>

Answer 4

Your .wrap class should have text-align: center
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>

Answer 5

Just add this to your CSS
img {
display: block;
margin: 0 auto;
}

Answer 6

Just add
margin: 0 auto;
display: block;
Thus it should be :
.wrap img {
border-radius: 12px;
margin: 0 auto;
display: block;
}
Or you can also add text-align:center to .wrap
Here is the fiddle:

Answer 7

Add style in wrap in class text-align: center;
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>