web-dev-qa-db-fra.com

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

Je veux que tout un bloc soit centré sur son parent, mais je veux que le contenu du bloc reste aligné.

Les exemples servent mieux

Sur cette page :

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

l'art ascii devrait être centré (comme il apparaît), mais il devrait être aligné et ressembler à "YAML".

Ou ca :

http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0a%0d%0a++++++ -07-23% 0d% 0a% 0d% 0a% 3f +% 5b + nouveaux + 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 tous s'aligner comme dans une console.

cssalignmentcenter
62
Paul Tarjan

Republier la réponse de travail de l'autre question: Comment centrer horizontalement un élément flottant d'une largeur variable?

En supposant que l'élément qui est flottant et qui sera centré est un div avec un id = "contenu" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

Et appliquez le CSS suivant

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Voici une bonne référence à ce sujet http://dev.opera.com/articles/view/35-floats-and- clearing/#centeringfloats

17
Paul Tarjan

Commencez par créer un parent div qui centre son contenu enfant avec text-align: center. Ensuite, créez un enfant div qui utilise display: inline-block s'adapter à la largeur de ses enfants et text-align: left pour aligner le contenu qu’il contient sur la gauche, comme vous le souhaitez.

<div style="text-align: center;">
    <div style="display: inline-block; text-align: left;">
        Centered<br />
        Content<br />
        That<br />
        Is<br />
        Left<br />
        Aligned
    </div>
</div>
127
Keavon

Si je vous comprends bien, vous devez utiliser pour centrer un conteneur (ou un bloc)

margin-left: auto;
margin-right: auto;

et à gauche aligner son contenu:

text-align: left;
3
eKek0

Normalement, vous devez utiliser margin: 0 auto sur la div comme indiqué dans les autres réponses, mais vous devrez spécifier une largeur pour la div. Si vous ne voulez pas spécifier de largeur, vous pouvez soit (ceci dépend de ce que vous essayez de faire) utiliser des marges, quelque chose comme marge: 0 200px; , cela devrait donner l'impression que votre contenu est centré, vous pouvez également voir la réponse de Leyu à ma question

2
Waleed Eissa

J'ai trouvé le moyen le plus simple de centrer et d'aligner le texte à gauche dans un conteneur comme suit:

HTML:

<div>
  <p>Some interesting text.</p>
</div>

CSS:

P {
  width: 50%; //or whatever looks best
  margin: auto; //top and bottom margin can be added for aesthetic effect
}

J'espère que c'est ce que vous recherchiez, car il m'a fallu un peu de recherche pour trouver cette solution assez simple.

1
L.Gaunt

Est-ce 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>
1
Ron Royston
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
1
Amber