html - 跨度中的垂直对齐文本

Question

这是我的演示

<span class="boxPrice  ">
    <p>Previous Bill</p>

</span> 

我想在<p>里面创建<span>

应垂直对齐中心内<span>

Answer 1

你可以加

display:inline-block;

到你的 p 元素。

Answer 2

添加line-height:75px;您需要确保行高与div高度相同/

http://jsfiddle.net/H4yuE/1/

Answer 3

块元素不受“影响” vertical-align: middle，只有内联元素......

我建议将 更改p为 inline 并添加vertical-align: middle，如下所示：

.boxPrice p {
    padding:0 !important;
    margin:0 !important;
    display: inline;
    vertical-align:middle;
}

小提琴

Answer 4

1. 我宁愿不在内联级元素（“span”）中使用块级元素（“p”）元素。改用 div 。

2. 有几个技巧可以做到这一点，最简单的是修改 line-height 以匹配容器的高度：

.container {
     width: 100px;
     height: 100px;
     line-height: 100px; /* Set it to the container height */
}

你也可以使用“display:table-cell”来达到同样的效果：

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

Answer 5

.boxPrice
  {
 width:160px; height:75px; border:1px #333 solid; text-align:center; display:inline-block;}           
.boxPrice p{padding:20px !important; margin:0 !important}
.boxPrice:after{ display:inline-block; content:'';vertical-align:middle;  height:100%}