使用 CSS 水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6315538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal alignment with CSS
提问by Derek J
I have the following code:
我有以下代码：
<div class="one">
<p>Test<p><span style="color: Green">▼</span>
</div>
This is a really easy question I think but I don't know CSS. How can I make the paragraph appear aligned horizontal in the center?
我认为这是一个非常简单的问题，但我不知道 CSS。如何使段落在中心水平对齐？
回答by itsols
There are two issues here.
这里有两个问题。
- To center the DIV that contains the paragraph.
- To center the paragraphs that come within the DIV.
- 将包含该段落的 DIV 居中。
- 将 DIV 中的段落居中。
To center the DIV, here's the code using inline styling:
为了使 DIV 居中，以下是使用内联样式的代码：
<div style="margin: 0 auto" class="one">
<p>Test<p>
</div>
The above will center the whole DIV but NOT align the text to the center. Again, the div will only get centered if the class "one" has a width specified. Otherwise, it has no effect. You can also include the margin style info inside the class named "one".
以上将使整个 DIV 居中，但不会将文本与中心对齐。同样，如果类“one”具有指定的宽度，div 只会居中。否则，它没有任何作用。您还可以在名为“one”的类中包含边距样式信息。
Now, to align all text that appear within the DIV horizontally, you can style it like this:
现在，要水平对齐 DIV 中出现的所有文本，您可以将其设置为如下样式：
<div style="text-align: center" class="one">
<p>Test<p>
</div>
And if you want to apply the centering style only for a single paragraph, you can include the the style rule within the <p>tag.
如果您只想为单个段落应用居中样式，您可以在<p>标签中包含样式规则。
回答by Richard
The margin solution with margin auto is suitable for floating block elements, but if it is only text within normal html you should look at this example here:
带有自动边距的边距解决方案适用于浮动块元素，但如果它只是普通 html 中的文本，则应在此处查看此示例：
http://www.w3schools.com/css/tryit.asp?filename=trycss_text-align_all
http://www.w3schools.com/css/tryit.asp?filename=trycss_text-align_all
回答by Nasser Hadjloo
you can use all of the following approaches
您可以使用以下所有方法
.One{text-align:center;}
or
或者
.One p{margin: 0 auto;}
回答by jumperchen
You can use the CSS.
margin:auto
您可以使用 CSS。
margin:auto
回答by cwhelms
your page should have this on it at the top inside the <head>tag
你的页面应该在<head>标签内的顶部有这个
<style type="text/css">
.one p {text-align:center;}
</style>
If you want to center the entire div, and not the text, use this but be sure to set a width for the div.
如果要使整个 div 居中，而不是将文本居中，请使用此选项，但请确保为 div 设置宽度。
<style type="text/css">
.one p {margin:0 auto; width:300px;} /*Change the width to what you need to*/
</style>
For vertical alignment, look into http://www.sohtanaka.com/web-design/vertical-alignment-css/
对于垂直对齐，请查看http://www.sohtanaka.com/web-design/vertical-alignment-css/
