Centra l'immagine usando il centro di allineamento del testo?

La proprietà è text-align: center;un buon modo per centrare un'immagine usando i CSS?

img {
    text-align: center;
}

Ciò non funzionerà poiché la text-alignproprietà si applica ai contenitori di blocchi, non agli elementi inline ed imgè un elemento inline. Vedi le specifiche W3C .

Usa questo invece:

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>

Non funziona sempre ... in caso contrario, prova:

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

Mi sono imbattuto in questo post e ha funzionato per me:

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>

(Allineamento verticale e orizzontale)

Un altro modo per farlo sarebbe centrare un paragrafo allegato:

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

Tu puoi fare:

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

In realtà, l'unico problema con il tuo codice è che l' text-alignattributo si applica al testo (sì, le immagini contano come testo) all'interno del tag. Dovresti mettere un spantag attorno all'immagine e impostarne lo stile su text-align: center, in questo modo:

span.centerImage {
     text-align: center;
}

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

L'immagine sarà centrata. In risposta alla tua domanda, è il modo più semplice e più sicuro per centrare le immagini, purché ti ricordi di applicare la regola al contenuto span(o div) dell'immagine .

Esistono tre metodi per centrare un elemento che posso suggerire:

1. Utilizzando la text-alignproprietà

       .parent {
       text-align: center;
   }

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

   Esegui snippet di codiceNascondi risultati

   Espandi frammento

2. Utilizzando la marginproprietà

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

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

   Esegui snippet di codiceNascondi risultati

   Espandi frammento

3. Utilizzando la positionproprietà

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

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

   Esegui snippet di codiceNascondi risultati

   Espandi frammento

Il primo e il secondo metodo funzionano solo se il genitore è largo almeno quanto l'immagine. Quando l'immagine è più larga del suo genitore, l'immagine non rimarrà centrata !!!

Ma: il terzo metodo è un buon modo per farlo!

Ecco un esempio:

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>

Solo se è necessario supportare versioni precedenti di Internet Explorer.

L'approccio moderno è quello di fare margin: 0 autonel tuo CSS.

Esempio qui: 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;
}

L'unico problema qui è che la larghezza del paragrafo deve essere uguale alla larghezza dell'immagine . Se non si inserisce una larghezza nel paragrafo, non funzionerà, poiché assumerà il 100% e l'immagine verrà allineata a sinistra, a meno che ovviamente non si usi text-align:center.

Prova il violino e sperimentalo se vuoi.

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

Se stai usando una classe con un'immagine, allora farà quanto segue

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

Se è solo un'immagine in una classe specifica che si desidera allineare al centro, attenersi alla seguente procedura:

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

Sull'immagine contenente il contenitore è possibile utilizzare un Flexbox CSS 3 per centrare perfettamente l'immagine all'interno, sia in verticale che in orizzontale.

Supponiamo che tu abbia <div class = "container"> come titolare dell'immagine:

Quindi come CSS devi usare:

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

E questo renderà tutti i tuoi contenuti all'interno di questo div perfettamente centrati.

La soluzione più semplice che ho trovato è stata aggiungere questo al mio img-element:

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

Sembra che non sia necessario aggiungere "0" prima di "auto" come suggerito da altri. Forse è il modo corretto, ma funziona abbastanza bene per i miei scopi anche senza lo "0". Almeno sugli ultimi Firefox, Chrome e Edge .

Cambia semplicemente allineamento genitore :)

Prova questo sulle proprietà principali:

text-align:center

Puoi usare text-align: centeril genitore e cambiare imgin display: inline-block→, quindi si comporta come un elemento di testo ed è centrato se il genitore ha una larghezza!

img {
    display: inline-block
}

Vorrei usare un div per allineare al centro un'immagine. Come in:

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

Se vuoi impostare l'immagine come sfondo, ho una soluzione:

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

Centrare un'immagine non di sfondo dipende dal fatto che si desideri visualizzare l'immagine come in linea (comportamento predefinito) o come elemento a blocchi.

Caso di in linea

Se si desidera mantenere il comportamento predefinito della proprietà CSS di visualizzazione dell'immagine, sarà necessario avvolgere l'immagine all'interno di un altro elemento a blocchi su cui è necessario impostare text-align: center;

Caso di blocco

Se vuoi considerare l'immagine come un elemento a blocchi a sé stante, allora la text-alignproprietà non ha senso, e dovresti invece farlo:

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

La risposta alla tua domanda:

La proprietà text-align: center; un buon modo per centrare un'immagine usando i CSS?

Sì e no.

• Sì, se l'immagine è l'unico elemento all'interno del suo involucro.
• No, nel caso in cui tu abbia altri elementi all'interno dell'involucro dell'immagine perché tutti gli elementi figli che sono fratelli dell'immagine erediteranno la text-alignproprietà: e potrebbe essere che non ti piacerebbe questo effetto collaterale.

Riferimenti

1. Elenco di elementi incorporati
2. Centrare le cose

Un altro modo per ridimensionare: visualizzalo:

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 */
}

Usa questo per il tuo imgCSS:

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

display: blockcon margin: 0non ha funzionato per me, né avvolgersi con un text-align: centerelemento.

Questa è la mia soluzione:

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

translateX è supportato dalla maggior parte dei browser

Ho scoperto che se ho un'immagine e del testo all'interno di una div, allora posso usare text-align:centerper allineare il testo e l'immagine in un colpo solo.

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

A volte aggiungiamo direttamente il contenuto e le immagini sull'amministratore di WordPress all'interno delle pagine. Quando inseriamo le immagini all'interno del contenuto e vogliamo allineare quel centro. Il codice viene visualizzato come:

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

In tal caso è possibile aggiungere contenuti CSS in questo modo:

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

Uso:

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

Penso che questo sia il modo di centrare un'immagine nel framework Laravel.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

questo renderà l'immagine centrale sia in verticale che in orizzontale