Question

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

问题在于，当我将div设置为居中，p设置为左侧时，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

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

您只需声明margin: auto;或width百分比或固定，只要它小于父元素。

＆＃13;

max-width

＆＃13;

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

＆＃13;

此外，您可以使用<div class="container"> <p>The quick brown fox jumps over the lazy dog.</p> </div>执行此操作，因为它具有 缩小至适合 功能。即使没有设置任何宽度，这也可以工作。

＆＃13;

display: table;

＆＃13;

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

＆＃13;

或者，<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;标记，则需要额外的包装。

＆＃13;

body

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

p {
    text-align: left;
}

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

3 个答案: