文本和另一個內的div的垂直對齊

Question

HTML

<div id="divTop">divTop</div>
<div id="divBottom">divBottom
<div id="divCenter">divCenter</div>
</div>

CSS

html, body{
    height:100%;
}
#divTop{
    height:50px;
    background:#008080;
    color:#ffffff;
    text-align:center;
    vertical-align:middle;
}
#divBottom{
    height:100%;
    text-align:center;
    vertical-align:middle;
    border:thick solid blue;
}
#divCenter{
    width:50vmin;
    height:50vmin;
   border:medium solid red;     
}

我想要： divCenter在divBottom內水平和垂直divBottom ，並且在所有div內的文本垂直居中。
請幫忙。

jsfiddle在這里

Answer 1

嗨，SunSky，我把您的小提琴分了出來，做了一本，您可以使用transformation屬性來旋轉文本。 這應該可以在webkit瀏覽器，mozilla，opera和IE9中使用。 我沒有嘗試在早期版本的IE瀏覽器，但它應該工作至少在IE版本7和8的transform屬性可用於IE 7,8我把CSS屬性除了<=提到IE8瀏覽器writing-mode:tb-lr; 和text-orientation:sideways-lr; 在這些較舊的IE瀏覽器中獲得理想的效果。 您將必須運用這些價值觀來獲得自己真正想要的。 使用transformations更容易，因為您只需將其旋轉到所需的點，如果要使其居中或從divCenter的邊緣移動，只需使用paddings即可使框居中，您可以使用margin-left:auto; 和margin-right:auto; 為了使它們起作用，您需要設置width您可以使用jsfiddle的 100％，以便您可以看到代碼，以及W3寫作模式文檔 。 我希望這對您有任何疑問或意見的問題有幫助。

編輯：

我沒有仔細閱讀問題，我將把信息留在后面，就像其他有關創建垂直文本的文本轉換信息一樣。 要使垂直文本居中，您可以查看該鏈接， 這是關於如何垂直對齊以及如何不對齊的最終示例很可能是您所要查找的示例，如果這樣做不起作用，那么Stackoverflow上存在一些問題可以為您提供幫助鏈接：

Div中的文本垂直對齊具有一些指向更多信息的鏈接。

如何使用CSS在圖像旁邊垂直對齊文本？ 對於這一點，檢查第二個答案很簡單，並提供了一些很好的技巧和方法來存檔所需的內容。 我希望這會有所幫助，這就是您真正想要的。 這是最新的jsfiddle，它應該可以按您想要的方式工作，您需要做的是將height和width設置為垂直居中，然后將top屬性設置為50％，然后將margin-top屬性設置為負height的一半。您想居中的div 。 如果您需要將此對齊方式應用於所有divs只需在每個對應的div使用CSS屬性，或者為了簡化代碼，使用這些屬性創建一個類 （ HTML <div class="foo"></div> CSS .foo{} ），只需將其添加到您希望文本垂直對齊的元素即可。