107

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
  • 28,495
  • 9
  • 107
  • 102
Paul Tarjan
  • 48,968
  • 59
  • 172
  • 213

11 Answers11

222

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,837
  • 9
  • 51
  • 79
  • 12
    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
  • 4
    @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
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
  • 48,968
  • 59
  • 172
  • 213
  • Also works great with the "wrap" being `pre` and the "content" `code`. – Serge Stroobandt Oct 10 '15 at 21:30
  • 1
    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
  • 23,005
  • 25
  • 91
  • 119
5

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
  • 69
  • 1
  • 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
  • 10,283
  • 16
  • 60
  • 82
  • 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
  • 507,862
  • 82
  • 626
  • 550
  • 1
    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
  • 16,778
  • 6
  • 77
  • 91
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,824
  • 17
  • 99
  • 186
Angilas
  • 21
  • 1
0

use CSS text-align and display properties to see changes accordingly. Margins are also helpful. For me in the case of SweetAlert to center and align left the following code works. For you may be a different scenario.

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

in ts file

 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',
  });
 }
Zia Khan
  • 188
  • 2
  • 9
0

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

I came close to the above acceptable result using grid for each row and width for each column.

This is the raw text:

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>

I turned it into a completely centered grid with 3 columns:

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

Finally, I defined a specified width for each element. This resulted in a centered block with text that is justified left, except for the title:

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

Varying the width for each column (based on a counter of its content, for example), could provide better adjustment for edge cases.

raratiru
  • 8,748
  • 4
  • 73
  • 113
-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
  • 8,409
  • 22
  • 75
  • 99
user7212232
  • 33
  • 6
  • 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