Wyśrodkuj obraz używając text-align center?

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

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

Natknąłem się ten post i mi się udało:

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

(wyrównanie pionowe i poziome)

Innym sposobem zrobienia byłoby wyśrodkowanie załączonego akapitu:

<p style="text-align:center"><img src="..."/></p>

Możesz zrobić:

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

Właściwie jedynym problemem z Twoim kodem jest to, że atrybut text-align odnosi się do tekstu (tak, obrazy liczą się jako tekst) wewnątrz znacznika. Warto umieścić znacznik span wokół obrazu i ustawić jego styl na text-align: center, tak:

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 najprostszy i najbardziej niezawodny sposób na wyśrodkowanie obrazów, o ile pamiętasz, aby zastosować regułę do obrazów zawierających span (lub div).

Tylko wtedy, gdy potrzebujesz obsługi starożytnych przeglądarek IE.

Nowoczesne podejście polega na wykonaniu margin: 0 auto w 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ż założy 100% i twój obraz zostanie wyrównany w lewo, chyba że użyjesz text-align:center.

Istnieją trzy metody centrowania elementu, które mogę zasugerować.

1. Korzystanie z własności text-align

       .parent {
       text-align: center;
   }

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

2. Korzystanie z własności margin

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

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

3. Korzystanie z własności position

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

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

Pierwsza i druga metoda działają tylko wtedy, gdy rodzic jest co najmniej tak szeroki jak obraz. Gdy obraz jest szerszy niż jego rodzic, obraz nie zostanie wyśrodkowany!!!

Ale: Trzecia metoda jest na to dobrym sposobem!

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>

Jeśli używasz klasy z obrazkiem, wykonasz następujące czynności

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

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

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

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

Po prostu zmień parent align:)

Spróbuj tego na właściwości rodzica text-align:center

Możesz użyć text-align: center na rodzicu I zmienić img na display: inline-block - > dlatego zachowuje się jak element tekstowy i będzie wyśrodkowany, jeśli rodzic ma szerokość!

img {
    display: inline-block
}

Na obrazie trzymającym kontener można użyć CSS3 flex box, aby idealnie wyśrodkować obraz wewnątrz, zarówno w pionie, jak i w poziomie. Załóżmy, że masz jako posiadacz obrazu: następnie jako css musisz użyć

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

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

Użyłbym div do wyśrodkowania obrazu. Jak w:

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

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

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

Wyśrodkowanie obrazu bez tła zależy od tego, czy obraz ma być wyświetlany jako element wbudowany (zachowanie domyślne), czy jako element blokowy.

Case of inline

Jeśli chcesz zachować domyślne zachowanie właściwości display CSS obrazu, musisz zawinąć obraz w inny element bloku, do którego należy ustawić text-align: center;

Przypadek bloku

Jeśli chcesz uznać obraz za własny element blokowy, to text-align właściwość nie robi sens, a zamiast tego powinieneś to zrobić:

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

Odpowiedź na twoje pytanie:

Jest właściwością text-align: center; dobry sposób na wyśrodkowanie obrazu używając CSS?

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

Referencje

1. lista elementów inline
2. Centrowanie rzeczy

Jeszcze jeden sposób na skalowanie-wyświetlanie:

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

Użyj tego do swojego img css

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

display: block z margin: 0 nie zadziałało dla mnie, ani owijanie z 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 wewnątrz div, to mogę użyć text-align:center do 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 na admin wordpress wewnątrz stron. Kiedy wstawiamy obrazy na stronie zawartość i chcemy wyrównać to centrum. Kod wyświetlany jest jako:

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

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

Artykuł p img{ margines: 0 auto; wyświetlacz: block; text-align: center; float: brak; }

<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 środkowy obraz w ramce Laravela.