99

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

Serge Stroobandt
  • 24,143
  • 8
  • 98
  • 91
Paul Tarjan
  • 46,930
  • 58
  • 166
  • 211

9 Answers9

204

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.

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

If you wish to ensure that a long line does not widen everything too much, you may also apply the max-width property (with a value of your choice) to the inner tag:

max-width: 250px;
Keavon
  • 6,036
  • 8
  • 48
  • 74
  • 6
    Clear and effective. Thank you! – fuzzybear3965 Nov 01 '16 at 20:29
  • 11
    doesn't work since as soon as a _single_ line of text doesn't fit on one line it wraps the text and results in the block being full width but the text being less than full width, so even though the block is centered it doesn't matter since the text is NOT the full width of the containing block. For an example refer to diagram 2a of http://stackoverflow.com/questions/8702802/how-can-i-centre-left-aligned-text-even-when-it-wraps – user3338098 Mar 01 '17 at 19:45
  • Simple and beautiful! Thanks – Cesar Bielich Oct 07 '18 at 02:13
  • 3
    @user3338098 It does work, in your case you need to set a max width for your text to stop the block from expanding to an undesired size. I literally just applied this exact same logic to my work and was able to achieve diagram 1b + 2b. – Mark Jun 17 '19 at 16:51
  • Simple, elegant and perfect. Thank you sir – Edvin Keskin Jan 17 '22 at 23:43
22

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

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

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

Community
  • 1
  • 1
Paul Tarjan
  • 46,930
  • 58
  • 166
  • 211
  • Also works great with the "wrap" being `pre` and the "content" `code`. – Serge Stroobandt Oct 10 '15 at 21:30
  • doesn't work since as soon as `This will be centered` doesn't fit on one line it wraps the text and results in the block being full width but the text being less than full width, so even though the block is centered it doesn't matter since the text is NOT the full width of the containing block. For an example refer to diagram 2a of http://stackoverflow.com/questions/8702802/how-can-i-centre-left-aligned-text-even-when-it-wraps. – user3338098 May 05 '16 at 19:18
  • Try to avoid using negative values! It won't work correctly in all browsers. – Grasper Apr 25 '18 at 14:17
5

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;
eKek0
  • 22,531
  • 24
  • 88
  • 119
3

I've found the easiest way to centre and left-align text inside a container is the following:

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
}

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.

L.Gaunt
  • 39
  • 4
2

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

Community
  • 1
  • 1
Waleed Eissa
  • 9,855
  • 16
  • 59
  • 79
  • sadly your solution creates an overflow with a forced horizontal scrollbar. Adding overflow: hidden to the parent element isn't good since my output might be long enough to warrant a scroll bar. Sorry :( – Paul Tarjan Aug 13 '09 at 07:28
  • Actually it's not my solution as I referred, but anyway, I don't get what you mean by overflow: hidden forcing scrollbars, it should hide contents not force scrollbars. – Waleed Eissa Aug 13 '09 at 16:47
  • The solution in your post causes a horizontal scrollbar since the content is actually shifted 50% to the right. This requires a overflow:hidden to remove which doesn't work for me. – Paul Tarjan Aug 17 '09 at 01:47
1
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
Amber
  • 477,764
  • 81
  • 611
  • 541
  • also, i don't want the width: 400px. possible without that? – Paul Tarjan Aug 13 '09 at 01:44
  • The problem is that a block-level element will expand to fill the greatest width possible unless you put a limit on it. – Amber Aug 13 '09 at 01:45
  • so, what I want to do is impossible? – Paul Tarjan Aug 13 '09 at 01:46
  • It could be that someone knows a secret that I'm not aware of, but to my knowledge, yes. – Amber Aug 13 '09 at 01:53
  • I agree with Dav. Perhaps, you might take a look at tinyMCE or another rich text-editor that allows more customization than the standard HTML textarea. Unfortunately, you might end up spending a lot of time with a hackish result. Good luck though! – mkelley33 Aug 13 '09 at 02:01
1

Is this what you are looking for? 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>
Ronnie Royston
  • 13,836
  • 5
  • 66
  • 83
1

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

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

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

halfer
  • 19,471
  • 17
  • 87
  • 173
Angilas
  • 21
  • 1
-1

THIS works

<div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>
Donald Duck
  • 7,638
  • 19
  • 69
  • 90
user7212232
  • 35
  • 5
  • 3
    Can you explain your code and its advantages and disadvantages? That way others can learn from it instead of just copy&pasting something they may or may not fully understand. – Robert Mar 19 '17 at 03:32