如何居中div但左对齐文本？

Question

我想在页面的中心放置一个div块，但文本应保持在居中块的左侧。

问题是当我将div设置为center并将p设置为left时，p中的内容位于整个页面的左侧，而不是居中块的左侧。

.container {
  text-align: center;
  margin: auto;
}

.container p {
  text-align: left;
}

<div class="container">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

Answer 1

默认情况下，文本始终保留。并且您应该为容器提供宽度，否则它将是页面的完整大小。

.container {
  width: 1000px;
  height: 500px;
  margin: auto;
  border: 1px solid red;
}

<div class="container">
  <div class="another-container">
    <p>Some text goes here.</p>
  </div>
</div>

Answer 2

在您的示例中，margin: auto;或margin: 0 auto;是正确的方法，但div是块级元素，默认情况下它占据整个可用宽度，因此margin: auto;在视觉上没有效果。

你需要的只是声明width或max-width百分比或固定，只要它小于父元素。

.container {
  margin: 0 auto;
  max-width: 200px;
  border: 1px solid;
}

<div class="container">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

此外，您可以使用display: table;来实现它，因为它具有缩小到适合的功能。即使没有设置任何宽度，这也可以工作。

.container {
  display: table;
  margin: 0 auto;
  border: 1px solid;
}

<div class="container">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="container" style="max-width: 500px;">
  <h2>Example: max-width and wrapping text</h2>
  <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</div>

或者，display: inline-block;与上面类似的功能。注意，如果您不想定位body标记，则需要额外的包装器。

.outer {
  text-align: center;
}

.container {
  border: 1px solid;
  display: inline-block;
  text-align: left;
}

<div class="outer">
  <div class="container">
    <p>The quick brown fox jumps over the lazy dog.</p>
  </div>
</div>

Answer 3

你的意思是在页面的中心？否则你可以这样做

div.container {
   text-align: center;
   max-width : 700px;
   margin : auto;
   background : blue;
   }

p {
    text-align: left;
}