CSS: Bloc central, mais aligner le contenu à gauche

Je veux qu’un centre entier soit centré dans son parent, mais je veux que le contenu du bloc rest aligné.

Les exemples servent le mieux

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’art ascii devrait être centré (tel qu’il apparaît) mais il devrait s’aligner et ressembler à “YAML”.

Ou ca :

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 tous s’aligner comme il le fait dans une console.

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

     
    Centered
    Content
    That
    Is
    Left
    Aligned

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

    En supposant que l’élément qui est flottant et sera centré est un div avec un id = “content” …

      
    This will be centered

    Et appliquer les CSS suivantes

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

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

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

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

    et à gauche aligner son contenu:

     text-align: left; 
     
     Hello Testing Beep 

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

    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; } 
     
    A
    B
    C

    J’ai trouvé le moyen le plus simple de centrer et d’aligner le texte à l’intérieur d’un conteneur:

    HTML:

     

    Some interesting text.

    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 cherchiez, car il m’a fallu pas mal de recherche pour trouver cette solution assez simple.

    Cela marche

     
    • YouTube AutoComplete Keyword Scraper software root keyword text box.
    • YouTube.com website video search text box.
    • YouTube AutoComplete Keyword Scraper software scraped keywords listbox.
    • YouTube AutoComplete Keyword Scraper software right click context menu.