林創建一個新的網站，我需要知道的東西（將顯示與例子）。CSS：水平和垂直居中文本？
可以說我做到了這一點：
html;
<div id="center-in-bar">
<ul>
<li>content..</li>
<li>content..</li>
<li>content..</li>
<li>content..</li>
</div>
和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*/
}
我該怎麼做，使所有中心的水平和垂直的li元素？在中央的酒吧元素？
任何幫助將appriciated :)）
試試這個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 */
...
}
不知怎的，還是有這樣做沒有標準，但以我的經驗大概就是下面的整體最可靠的解決方案：
<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>
這裏的另一種技術利用相對和絕對定位來模擬居中位置。這種技術並不確切，但它應該是用任何瀏覽器（甚至是早期的）兼容：
<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>
重要提示：
當這個問題被問的人似乎都在暗示line-height作爲解決方案，但我會懇求你避開這個建議。當你展示像「Hello World」這樣簡單的東西時，它看起來不錯，但是line-height在文字換行時突然崩潰。
如何水平居中模塊項目（如DIV）或內聯項目（如文本）
比方說，你想一個瀏覽器頁面的中央文件，所以，不管你有多大調整你的瀏覽器中的元素始終圍繞：
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;
}
寫這個HTML在你的身體標記之間水平居中的東西：
<body>
<div id="Content">I am a centered DIV</div>
</body>
這將水平居中塊級元素。要居中文本，跨度，或其它內聯元素所有你需要補充的是：
#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;
}
如何垂直居中模塊項目（如DIV）或內聯項目（如文本）
注意：不要使用行高來垂直居中元素，因爲它僅適用於一行文本，而只能用於其他行。
對於垂直居中的物品，有3-5種方法可以使用，具體取決於什麼它正在嘗試居中。
該網站介紹了每種方法很容易地爲您提供： http://blog.themeforest.net/tutorials/vertical-centering-with-css/
祝您好運！
你應該給相同的值，行高和高度。
#center-in-bar li
{
height: 30px
line-height: 30px;
text-align: center;}
垂直居中不是一件很容易的事，並acheiving它依賴於一定的標準的方法（有幾種不同的方法，但每個人都有條件）。 –