CSS Center block but align contents to the left

Question

I want a whole block to be centered in its parent  but I want the contents of the block to be left aligned    Examples serve best  On this 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 amp type python  the ascii art should be centered  as it appears  but it should line up and look like  YAML    Or this    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  the error message should all line up as it does in a console

User · Answer

For those of us still working with older browsers, here's some extended backwards compatibility:

_x000D_

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

_x000D_

Partially inspired by this post: https://stackoverflow.com/a/12567422/14999964.

User · Answer

If I understand you well  you need to use to center a container  or block   margin-left  auto  margin-right  auto    and to left align it s contents   text-align  left

User · Answer

I ve found the easiest way to centre and left-align text inside a container is the following   HTML    lt div gt     lt p gt Some interesting text  lt  p gt   lt  div gt    CSS   P     width  50     or whatever looks best   margin  auto    top and bottom margin can be added for aesthetic effect     Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution

User · Answer

Reposting the working answer from the other question  How to horizontally center a floating element of a variable width   Assuming the element which is floated and will be centered is a div with an id  content        lt body gt   lt div id  wrap  gt      lt div id  content  gt     This will be centered     lt  div gt   lt  div gt   lt  body gt    And apply the following CSS   wrap       float  left      position  relative      left  50       content       float  left      position  relative      left  -50       Here is a good reference regarding that http   dev opera com articles view 35-floats-and-clearing  centeringfloats

User · Answer

THIS works   lt div style  display inline-block margin 10px auto   gt       lt ul style  list-style-type none   gt           lt li style  text-align left   gt  lt span class  red  gt   lt  span gt  YouTube AutoComplete Keyword Scraper software  lt em gt root keyword text box lt  em gt   lt  li gt           lt li style  text-align left   gt  lt span class  red  gt   lt  span gt  YouTube com website  lt em gt video search text box lt  em gt   lt  li gt           lt li style  text-align left   gt  lt span class  red  gt   lt  span gt  YouTube AutoComplete Keyword Scraper software  lt em gt scraped keywords listbox lt  em gt   lt  li gt           lt li style  text-align left   gt  lt span class  red  gt   lt  span gt  YouTube AutoComplete Keyword Scraper software  lt em gt right click context menu lt  em gt   lt  li gt       lt  ul gt   lt  div gt

User · Answer

Normally you should use margin  0 auto on the div as mentioned in the other answers  but you ll have to specify a width for the div  If you don t want to specify a width you could either  this is depending on what you re trying to do  use margins  something like margin  0 200px    this should make your content seems as if it s centered  you could also see the answer of Leyu to my question

User · Answer

lt div gt       lt div style  text-align  left  width  400px  border  1px solid black  margin  0 auto   gt            lt pre gt  Hello Testing Beep           lt  pre gt       lt  div gt   lt  div gt

User · Answer

First  create a parent div that centers its child content with text-align  center  Next  create a child div that uses display  inline-block to adapt to the width of its children and text-align  left to make the content it holds align to the left as desired    x000D   x000D   lt div style  text-align  center   gt  x000D       lt div style  display  inline-block  text-align  left   gt  x000D          Centered lt br   gt  x000D          Content lt br   gt  x000D          That lt br   gt  x000D          Is lt br   gt  x000D          Left lt br   gt  x000D          Aligned x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Is this what you are looking for  Flexbox      x000D   x000D   container  x000D    display  flex  x000D    flex-flow  row wrap  x000D    justify-content  center  x000D    align-content  center  x000D    align-items  center  x000D    x000D   inside  x000D    height 100px  x000D    width 100px  x000D    background gray  x000D    border 1px solid  x000D    x000D   lt section class  container  gt  x000D     lt section class  inside  gt  x000D      A x000D     lt  section gt  x000D     lt section class  inside  gt  x000D      B x000D     lt  section gt  x000D     lt section class  inside  gt  x000D      C x000D     lt  section gt  x000D   lt  section gt  x000D   x000D   x000D

[css] CSS: Center block, but align contents to the left

Examples related to css

Examples related to alignment

Examples related to center