CSS: tasvirni markazlashtirish. Nima uchun "matnni hizalamoq: markaz" emas?

Ruxsat etilgan kattalikdagi div-konteyner ichida tasvirni markazga qo'yishim kerak.

Mening birinchi fikrim: img inline-element. Shuning uchun text-align: center dan foydalanishingiz mumkin. Matnda bo'lgani singari.

Lekin bu ishlamaydi.

Men bu demoni yaratdim:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
  bild
  
Just a little bit of placeholder-text.

</div>
</div> </div>

Ko'rib turganingizdek: Matn markazlashtirilishi juda yaxshi ishlaydi. Biroq, tasvir markazlashuvi bajarilmaydi.

Bu erda nima qildim? Shunga ko'ra: taxminlarim qaysi biri noto'g'ri?

0
Matn hiylasini qo'shishga harakat qiling: markaz .wrap.
qo'shib qo'ydi muallif Álvaro Touzón, manba

7 javoblar

.wrap {
  text-align: center;
}

Buni foydalaning

3
qo'shib qo'ydi

text-align affects the inline content of an element.

Rasm ning mazmuni emas, balki .

Bunga ta'sir qilish uchun text-align uchun xususiyatini ota-ona ga qo'llashingiz kerak.

2
qo'shib qo'ydi
Meni xafa qil. Ehtimol, mening savolim boshqasiga xuddi shunday xato qilishiga yordam beradi. Barchangizga katta rahmat.
qo'shib qo'ydi muallif michael.zech, manba

Faqat qo'shing

margin: 0 auto;
display: block;

Shunday qilib, shunday bo'lishi kerak:

.wrap img {
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}

Or you can also add text-align:center to .wrap

Mana fiddle :

1
qo'shib qo'ydi

Xristian img inline eliment hisoblanadi, shuning uchun siz matnni hizalamaydi: center; tasvir uchun Buni tekshirish uchun ota-bobni qo'shing

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
  bild
  
Just a little bit of placeholder-text.

</div>
</div> </div>
1
qo'shib qo'ydi

Add style in wrap in class text-align: center;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
  bild
  
Just a little bit of placeholder-text.

</div>
</div> </div>
1
qo'shib qo'ydi

Sizning .wrap sinfida matnni hizalamak kerak: markaziy

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
  bild
  
Just a little bit of placeholder-text.

</div>
</div> </div>
1
qo'shib qo'ydi

Buni CSS-ga qo'shing

img {
    display: block;
    margin: 0 auto;
}
1
qo'shib qo'ydi