CSS: 中心块，但内容向左对齐

小开

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;

小开

<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>

小开

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

小开

最佳答案

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

小开

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;

小开

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>

小开

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>

小开

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.

小开

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.

小开

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',
});
}