Wyśrodkować obraz za pomocą centrum wyrównywania tekstu?

Czy właściwość text-align: center;jest dobrym sposobem na wyśrodkowanie obrazu za pomocą CSS?

img {
    text-align: center;
}

To nie zadziała, ponieważ text-alignwłaściwość dotyczy kontenerów blokowych, a nie elementów wbudowanych i imgjest elementem wbudowanym. Zobacz specyfikację W3C .

Zamiast tego użyj tego:

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

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

To nie zawsze działa ... jeśli nie, spróbuj:

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

Natrafiłem na ten post i zadziałało to dla mnie:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(Wyrównanie w pionie i poziomie)

Innym sposobem zrobienia tego byłoby wyśrodkowanie akapitu:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Możesz to zrobić:

<center><img src="..." /></center>

W rzeczywistości jedynym problemem związanym z kodem jest to, że text-alignatrybut dotyczy tekstu (tak, obrazy liczą się jako tekst) wewnątrz znacznika. Chcesz umieścić spanznacznik wokół obrazu i ustawić jego styl na text-align: center:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

Obraz zostanie wyśrodkowany. W odpowiedzi na twoje pytanie jest to najłatwiejszy i najbardziej niezawodny sposób na wyśrodkowanie obrazów, o ile pamiętasz o zastosowaniu reguły do ​​obrazu zawierającego span(lub div).

Istnieją trzy metody wyśrodkowania elementu, które mogę zasugerować:

1. Korzystanie z text-alignnieruchomości

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Uruchom fragment koduUkryj wyniki

   Rozwiń fragment kodu

2. Korzystanie z marginnieruchomości

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

   <img src="https://placehold.it/60/60" />

   Uruchom fragment koduUkryj wyniki

   Rozwiń fragment kodu

3. Korzystanie z positionnieruchomości

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Uruchom fragment koduUkryj wyniki

   Rozwiń fragment kodu

Pierwsza i druga metoda działają tylko wtedy, gdy element nadrzędny jest co najmniej tak szeroki jak obraz. Kiedy obraz jest szerszy niż jego rodzic, obraz nie pozostanie wyśrodkowany !!!

Ale: Trzecia metoda jest na to dobra!

Oto przykład:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Tylko jeśli potrzebujesz obsługi starożytnych wersji Internet Explorera.

Nowoczesne podejście jest do zrobienia margin: 0 autow CSS.

Przykład tutaj: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

Jedynym problemem jest to, że szerokość akapitu musi być taka sama jak szerokość obrazu . Jeśli nie umieścisz szerokości akapitu, nie zadziała, ponieważ przyjmie on 100%, a obraz zostanie wyrównany do lewej, chyba że oczywiście użyjesztext-align:center .

Wypróbuj skrzypce i eksperymentuj z nią, jeśli chcesz.

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

Jeśli używasz klasy z obrazem, zrobią to następujące rzeczy

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

Jeśli jest to tylko obraz w określonej klasie, który chcesz wyśrodkować, wykonaj następujące czynności:

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

Na obrazie przechowującym pojemnik można użyć Flexbox CSS 3, aby idealnie wyśrodkować obraz w środku, zarówno w pionie, jak iw poziomie.

Załóżmy, że masz <div class = "container"> jako uchwyt obrazu:

Następnie jako CSS musisz użyć:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

A to sprawi, że cała twoja zawartość wewnątrz div będzie idealnie wyśrodkowana.

Najprostszym rozwiązaniem, jakie znalazłem, było dodanie tego do mojego elementu img:

style="display:block;margin:auto;"

Wygląda na to, że nie muszę dodawać „0” przed „auto”, jak sugerują inni. Być może jest to właściwy sposób, ale działa wystarczająco dobrze dla moich celów bez „0”. Przynajmniej w najnowszych przeglądarkach Firefox, Chrome i Edge .

Po prostu zmień wyrównanie rodzica :)

Wypróbuj ten dla właściwości nadrzędnych:

text-align:center

Można używać text-align: centerna rodzica i zmienić imgsię display: inline-block→ zatem zachowuje się jak tekstowym elementu i będzie wyśrodkowany jeśli rodzic ma szerokość!

img {
    display: inline-block
}

Chciałbym użyć div, aby wyśrodkować obraz w środku. Jak w:

<div align="center"><img src="your_image_source"/></div>

Jeśli chcesz ustawić obraz jako tło, mam rozwiązanie:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

Aby wyśrodkować non tło obrazu zależy od tego, czy chcesz, aby wyświetlić obraz jako inline (zachowanie domyślne) lub element bloku.

Przypadek inline

Jeśli chcesz zachować domyślne zachowanie właściwości display CSS obrazu, musisz owinąć obraz wewnątrz innego elementu bloku, do którego musisz ustawić text-align: center;

Przypadek bloku

Jeśli chcesz uznać obraz za własny element blokowy, text-alignwłaściwość nie ma sensu i powinieneś to zrobić:

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Odpowiedź na twoje pytanie:

Czy właściwość text-align: center; dobry sposób na wyśrodkowanie obrazu za pomocą CSS?

Tak i nie.

• Tak, jeśli obraz jest jedynym elementem wewnątrz opakowania.
• Nie, w przypadku, gdy wewnątrz opakowania obrazu znajdują się inne elementy, ponieważ wszystkie elementy potomne, które są rodzeństwem obrazu, odziedziczą text-alignwłaściwość: być może nie spodobałby Ci się ten efekt uboczny.

Bibliografia

1. Lista elementów wbudowanych
2. Centrowanie rzeczy

Jeszcze jeden sposób skalowania - wyświetl go:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

Użyj tego do swojego imgCSS:

img {
  margin-right: auto;
  margin-left: auto;
}

display: blockz margin: 0nie działało dla mnie, ani owijanie za pomocątext-align: center elementem.

To jest moje rozwiązanie:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX jest obsługiwany przez większość przeglądarek

Odkryłem, że jeśli mam obraz i tekst w środku div, mogę użyć text-align:centerdo wyrównania tekstu i obrazu za jednym zamachem.

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Czasami bezpośrednio dodajemy zawartość i obrazy administratora WordPress na stronach. Kiedy wstawiamy obrazy do treści i chcemy wyrównać to centrum. Kod jest wyświetlany jako:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

W takim przypadku możesz dodać treść CSS w następujący sposób:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Posługiwać się:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

Myślę, że jest to sposób na wyśrodkowanie obrazu w środowisku Laravela.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

sprawi to, że obraz będzie wyśrodkowany zarówno pionowo, jak i poziomo