texte aligner à gauche au milieu de la page

Question

.equiv { 
    margin: auto; 
    display: table; 
} 
.equiv .eso { 
    display: table-cell; 
} 

J'utilise ces styles afin d'aligner le centre du conteneur .equiv et garder son contenu (en .eso) aligné à gauche:

<div class="equiv"> 
    <div class="eso"> 
    <p>Consider this text<br> 
     as a verse of a poem<br> 
     that is left aligned<br> 
     but in the middle of the page.</p> 
    <p>(The middle of the page<br> 
     corresponds to the middle<br> 
     of the largest line of course).</p> 
    </div> 
</div> 

bien

, cela fonctionne dans Firefox et Chrome, mais pas dans l'Explorateur, où le texte est simplement aligné à gauche (mais pas au milieu).
Y a-t-il une solution de contournement?

Answer 1

C'est assez simple en fait et vous avez tous les emballages dont vous avez besoin.

.equiv { 
    text-align: center; 
} 
.eso { 
    display: inline-block; 
    text-align: left; 
} 

Answer 2

Si vous en avez besoin centré à la fois verticalement et horizontalement, vous pouvez faire comme ceci.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.equiv { 
 
    height: 100%; 
 
    margin: auto; 
 
    display: table; 
 
} 
 
.equiv .eso { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="equiv"> 
 
    <div class="eso"> 
 
    <p>Consider this text<br> 
 
     as a verse of a poem<br> 
 
     that is left aligned<br> 
 
     but in the middle of the page.</p> 
 
    <p>(The middle of the page<br> 
 
     corresponds to the middle<br> 
 
     of the largest line of course).</p> 
 
    </div> 
 
</div>