如何垂直對齊另一個div中的div與文本？

我試圖垂直居中div在父div，其中文本存在。下面是我得到了什麼：如何垂直對齊另一個div中的div與文本？

enter image description here

它看起來有點滑稽，因爲文字似乎是正確居中，但黃盒子都沒有。這是我如何做到這一點：

.btn { 
     background-color: #ccc; 
     color: #000; 
     width: 200px; 
     border: solid 1px black; 
     text-align: center; 
     vertical-align: middle; 
     display: table-cell; 
} 
.square { 
     background-color: #ff0; 
     width: 20px; 
     height: 20px; 
     display: inline-block; 
} 
.inner { 
     display: inline-block; 
} 

<div class="btn"> 
    <div class="square"></div> 
    <div class="inner">Hello</div> 
    <div class="square"></div> 
</div>

我應該使用「table-cell」+ vertical-align工作嗎？我只在乎HTML5，我真的只是針對移動Safari瀏覽器的最新版本，所以不用擔心舊的瀏覽器等

下面是這一個js小提琴：

http://jsfiddle.net/TrJqF/

謝謝

來源

2013-01-19 user1219278

在方形課上設置vertical-align:top。額外的空間來自保留給後面的文本元素（如j，g，y等）的空間，這些元素落在該行的下方。

jsFiddle example

來源

2013-01-19 20:29:15 j08691

，幾乎完美的作品，但它看起來像文本的垂直對齊是稍微偏離，因爲正在採取伸/伸在考慮？例如，如果文本是「你好」，它看起來不正確，下面有更多的空間 - 但如果文本是「Helylo」，它看起來不錯，因爲「y」字符存在。任何解決方法？ – user1219278

其實這兩個身高都沒有區別。對內部課堂應用黃色背景顏色，並查看顯式和非高度的差異。

兩個方格都沒有內容而內格有內容。 CSS框根據其內容自行對齊。如果你願意，你可以添加頂部和底部頁邊距1或2像素，它會顯示你的期望

<div class="btn"> 
    <div class="square">&nbsp;</div> 
    <div class="inner">Hello</div> 
    <div class="square">&nbsp;</div> 
    </div>

：添加空白的廣場DIV如下。

來源

2013-01-19 20:23:48 programmermurali

我希望加入一個空的空間（）將解決問題 – programmermurali

如何垂直對齊另一個div中的div與文本？

回答

相關問題