如何在div中垂直對齊文本？

我試圖找到最有效的方法來將文本與div對齊。 我嘗試了幾件事，但彷佛都沒有用。

.testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; }

<div class="testimonialText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

---

#1樓

您能夠經過將顯示設置爲「表格單元」並應用vertical-align: middle; ：

{
        display: table-cell;
        vertical-align: middle;
    }

可是，根據我未經許可從http://www.w3schools.com/cssref/pr_class_display.asp複製的此摘錄，並不是全部版本的Internet Explorer都支持此功能。

注意：值「 inline-table」，「 table」，「 table-caption」，「 table-cell」，「 table-column」，「 table-column-group」，「 table-row」，「 table-row」 -group」和「繼承」不受Internet Explorer 7和更早版本的支持。 Internet Explorer 8須要！DOCTYPE。 Internet Explorer 9支持這些值。

下表還顯示了http://www.w3schools.com/cssref/pr_class_display.asp中容許的顯示值。

---

#2樓

這是一個很好的資源

從http://howtocenterincss.com/ ：

以CSS爲中心是一個麻煩。 取決於多種因素，彷佛有數不勝數的方法能夠作到這一點。 這樣能夠合併它們，併爲您提供每種狀況所需的代碼。

使用Flexbox

保持最新信息與最新技術保持一致，這是使用Flexbox集中內容的一種簡單得多的方法。 Internet Explorer 9及更低版本不支持Flexbox。

這裏有一些很棒的資源：

• Flexbox指南
• Flexbox的居中元素
• Flexbox的Internet Explorer 10語法
• 對Flexbox的支持

具備瀏覽器前綴的JSFiddle

li { display: flex; justify-content: center; align-content: center; flex-direction: column; /* Column | row */ }

<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on two lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>

另外一種解決方案

這是從zerosixthree開始的 ，它使您可使用六行CSS將任何內容居中

Internet Explorer 8及更低版本不支持此方法。

jsfiddle

p { text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on two lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>

先前的答案

一種簡單且跨瀏覽器的方法，用做標記答案中的連接有些過期了。

如何在不使用JavaScript或CSS行高的狀況下，在無序列表和div中垂直和水平居中顯示文本 。 不管您有多少文本，都沒必要將任何特殊類應用於特定列表或div（每一個代碼均相同）。 這適用於全部主要瀏覽器，包括Internet Explorer 9，Internet Explorer 8，Internet Explorer 7，Internet Explorer 6，Firefox，Chrome， Opera和Safari。 有兩種特殊的樣式表（一種用於Internet Explorer 7，另外一種用於Internet Explorer 6），由於它們的CSS限制（現代瀏覽器沒有）能夠幫助他們。

安迪·霍華德（Andy Howard）-如何在無序列表或div中垂直和水平居中顯示文本

因爲我對上一個工做的項目不太關心Internet Explorer 7/6，所以我使用了一個簡化版本（即刪除了使它在Internet Explorer 7和6中正常工做的東西）。 這可能對其餘人有用...

JSFiddle

.outerContainer { display: table; width: 100px; /* Width of parent */ height: 100px; /* Height of parent */ overflow: hidden; } .outerContainer .innerContainer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; } li { background: #ddd; width: 100px; height: 100px; }

<ul> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p> <!-- Content --> Content </p> </div> </div> </div> </li> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p> <!-- Content --> Content </p> </div> </div> </div> </li> </ul>

---

#3樓

若是須要使用min-height屬性，則必須在如下位置添加此CSS：

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

---

#4樓

嘗試嵌入表格元素。

<div> <table style='width:200px; height:100px;'> <td style='vertical-align:middle;'> copenhagen </td> </table> </div>

---

#5樓

我使用如下內容輕鬆使隨機元素垂直居中：

HTML：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS：

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

這會將我div的文本居中到200像素高的外部div的確切垂直中間。 請注意，您可能須要使用瀏覽器前綴（例如-webkit- ）來使此功能適用於您的瀏覽器。

這不只適用於文本，並且適用於其餘元素。