CSS : Centrer le bloc, mais aligner le contenu à gauche

Question

Je veux qu'un bloc entier soit centré dans son parent, mais je veux que le contenu du bloc soit aligné à gauche.

Les exemples sont les plus parlants

Sur cette page :

http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c%2f%7c%7c%0d%0a++%2f%2f+%7c%7c++%7c%7c__%0d%0a&type=python

l'image ascii devrait être centrée (comme elle apparaît) mais elle devrait s'aligner et ressembler à "YAML".

Ou encore ceci :

http://yaml-online-parser.appspot.com/ ? yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07- 23%0d%0a%0d%0a%3f+%5b+New+York+Yankees%2c%0d%0a++++Atlanta+Braves+%5d%0d%0a%3a+%5b+2001-07-02%2c+2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a

le message d'erreur devrait s'aligner comme dans une console.

Answer 1

<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>

Answer 2

Est-ce que c'est ce que vous recherchez ? Flexbox...

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.inside{
  height:100px;
  width:100px;
  background:gray;
  border:1px solid;
}

<section class="container">
  <section class="inside">
    A
  </section>
  <section class="inside">
    B
  </section>
  <section class="inside">
    C
  </section>
</section>

Answer 3

Pour ceux d'entre nous qui travaillent encore avec des navigateurs plus anciens, voici une compatibilité ascendante étendue :

<div style="text-align: center;">
    <div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
        Line 1: Testing<br>
        Line 2: More testing<br>
        Line 3: Even more testing<br>
    </div>
</div>

Partiellement inspiré par ce billet : https://stackoverflow.com/a/12567422/14999964 .

Answer 4

Utiliser le CSS alignement du texte y affichage pour constater les changements en conséquence. Marges sont également utiles. Pour moi, dans le cas de SweetAlert pour centrer et aligner à gauche, le code suivant fonctionne. Pour vous, c'est peut-être différent.

.format-pre pre {
    font-size: 18px;
    text-align: left;
    display: inline-block;
  }

dans le fichier ts

 showPasswordHints(){
  var message = 'Your password mist contain:<br>'+
  '1. At least 8 characters in length<br>'+
  '2. At least 3 Lowercase letters<br>'+
  '3. At least 1 Uppercase letter<br>'+
  '4. At least 1 Numbers<br>'+
  '5. At least 1 Special characters<br>'+
  '5. Maximum 16 characters in length';
Swal.fire({
  html:'<pre>' + message + '</pre>',
  customClass: {
    popup: 'format-pre'
  }
  ,
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  },
  icon: 'info',
  confirmButtonText: 'Got it',
  confirmButtonColor: '#3f51b5',
  });
 }

Answer 5

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.width {
  width: 12ch;
}

.title {
  text-align: center;
}

<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

Je me suis rapproché du résultat acceptable ci-dessus en utilisant grid pour chaque ligne et width pour chaque colonne.

Il s'agit du texte brut :

span {
  border: 1px solid;
  }

<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

Je l'ai transformé en un projet complètement centré sur l'homme. grid avec 3 colonnes :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

span {
  border: 1px solid;
  }

<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

Enfin, j'ai défini un width pour chaque élément. Il en résulte un bloc centré dont le texte est justifié à gauche, à l'exception du titre :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.width {
  width: 12ch;
}

.title {
  text-align: center;
}

span {
  border: 1px solid;
  }

<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

La variation de la width pour chaque colonne (sur la base d'un compteur de son contenu, par exemple), pourrait permettre une meilleure adaptation aux cas particuliers.