跨度中的垂直對齊文本

Question

這是我的演示

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

</span> 

我想在<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不會“影響”塊元素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%}