Question

我有以下内容，我想在页面中水平居中。但是，它保持左对齐。我有什么想法吗？

#container {
    width: 800px;
	margin: auto 0;
}

article {
	width:200px;
	margin: auto 0;
}

<div id="container">
	<article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</article>
</div>

Answer 1

您可以通过将margin: auto 0;替换为margin: 0 auto;来实现此目的：

#container {
	width:800px;
	margin: 0 auto;
}

article {
	width:200px;
	margin: 0 auto;
}

<div id="container">
	<article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</article>
</div>

Answer 2

#container {
    width:800px;
    margin: 0 auto;
}

article {
    width:200px;
    margin: 0 auto;
}

<div id="container">
    <article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</article>
</div>

已完成拼写和值的更改。

Answer 3

您可以通过多种方式获得此类功能。

如果您知道元素的宽度（200px），请将其从左侧定位50％，然后做一个负边距 - 左边等于元素宽度的一半（-100px）。

article {
   position:relative;
   left: 50%;
   margin-left: -100px;
   width: 200px;
}

http://plnkr.co/edit/ADTfAMlsyvTf46Ag35u4?p=preview

在元素上设置宽度并设置边距：0自动。当您指定具有2个值的边距（即边距：x x）时，第一个值将应用于顶部和底部，而第二个值将应用于左侧和右侧。因此它会自动定位在中间。设置页边距：自动0将内容放在左上角，这就是你看到它左对齐的原因。

article {
    margin: 0 auto;
    width: 200px;
}

http://plnkr.co/edit/MkZR6BUUzMD6LoWMuUPF?p=preview

如何居中文本块？

3 个答案: