CODEWITHSUNDEEP
htmlcss
cluster1
cluster1

Reputation: 5694

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

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?

Upvotes: 0

Views: 653

Answers (7)

Sumit patel
Sumit patel

Reputation: 3903

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>

Upvotes: 1

Boky
Boky

Reputation: 12074

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:

Upvotes: 1

user5380876
user5380876

Reputation:

Just add this to your CSS

img {
    display: block;
    margin: 0 auto;
}

Upvotes: 1

Quentin
Quentin

Reputation: 944064

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>.

Upvotes: 2

Ajay Bisht
Ajay Bisht

Reputation: 585

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>

Upvotes: 1

Jenti Dabhi
Jenti Dabhi

Reputation: 880

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>

Upvotes: 1

praveena
praveena

Reputation: 222

.wrap {
  text-align: center;
}

use this

Upvotes: 3

Related Questions