Html CSS：水平和垂直居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8187275/
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
CSS: Center text both horizontal and vertical?
提问by Stian Olsen
Im creating a new website and i need to know something(will show with example).
我正在创建一个新网站，我需要知道一些事情（将举例说明）。
Lets say i did this:
假设我这样做了：
html;
html;
<div id="center-in-bar">
<ul>
<li>content..</li>
<li>content..</li>
<li>content..</li>
<li>content..</li>
</div>
and css:
和CSS：
#center-in-bar {
list-style:none;
display:inline-block;
/*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}
What do I do to make all the li elements centered both horizontal and vertical? In the center-in-bar element?
我该怎么做才能使所有 li 元素水平和垂直居中？在 bar 中心元素中？
Any help would be appriciated :))
任何帮助都会得到帮助:))
采纳答案by Stian Olsen
Try this CSS snippet:
试试这个 CSS 片段：
#center-in-bar ul {
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
#center-in-bar li {
...
display:inline; /* you might want to use this instead of "inline-block" */
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
回答by James Johnson
Somehow, there's still no standard for doing this, but in my experience the following is probably the most reliable solution overall:
不知何故，仍然没有这样做的标准，但根据我的经验，以下可能是总体上最可靠的解决方案：
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's another technique that utilizes relative and absolute positioning to simulate centered-middle position. This technique is not exact, but it should be compatible with any browser (even the early ones):
这是另一种利用相对和绝对定位来模拟居中居中位置的技术。这种技术并不准确，但它应该与任何浏览器（甚至是早期浏览器）兼容：
<style type="text/css">
#vertical{
position:absolute;
top:50%; /* adjust this as needed */
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Important note:
重要的提示：
When this question gets asked someone always seems to suggest line-heightas a solution, but I would implore you to steer clear of that suggestion. It looks good when you're demonstrating something simple like "Hello World," but line-heightbreaks horribly when the text wraps.
当有人问这个问题时，似乎总是有人提出建议line-height作为解决方案，但我恳请您避开该建议。当您演示诸如“Hello World”之类的简单内容时，它看起来不错，但line-height在文本换行时会严重中断。
回答by Downpour046
HOW TO HORIZONTALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
如何将块项目（如 DIV）或内联项目（如文本）水平居中
Let's say you wanted to center a document on a browser page, so that no matter how big you resize your browser the element is always centered:
假设您想在浏览器页面上将文档居中，这样无论您调整浏览器的大小有多大，元素始终居中：
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
write this HTML for centering something horizontally in between your body tags:
编写此 HTML 以将某些内容水平居中在您的 body 标签之间：
<body>
<div id="Content">I am a centered DIV</div>
</body>
This will horizontally center block level elements. To center text, spans, or other inline elements all you would need to add is:
这将水平居中块级元素。要将文本、跨度或其他内联元素居中，您需要添加的是：
#Content {
width:500px;
margin:0px auto;
text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
HOW TO VERTICALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
如何垂直居中块项目（如 DIV）或内联项目（如文本）
Note: Do not use line-height to vertically center elements, as it will only work for one line of text and nothing more.
注意：不要使用 line-height 来垂直居中元素，因为它只适用于一行文本，仅此而已。
As for vertically centering items, there are 3-5 methods you can use depending on whatit is you are trying to center.
至于垂直居中的物品，有3-5个方法，你可以根据使用什么是你正在努力中心。
This site describes each method easily for you: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
该站点为您轻松描述了每种方法：http: //blog.themeforest.net/tutorials/vertical-centering-with-css/
Best of luck!
祝你好运！
回答by efirat
You should give same value to line-height and height.
您应该为 line-height 和 height 赋予相同的值。
#center-in-bar li
{
height: 30px
line-height: 30px;
text-align: center;}
also look at this: Text align vertical within li
也看看这个：文本在 li 内垂直对齐
