如何垂直对齐另一个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与文本？

回答

相关问题