垂直对齐不起作用

Question

因此，这里是发生了什么事情

我想在右侧箭头是在div的中心垂直对齐。这里的HTML：

<div class="title-block" > 
    <span class="date">{{ order.getCreated()|date('M d, Y') }}</span> 
    <span class="invoice">Invoice #{{ order.getInvoice().getInvoiceNumber()}}</span> 
    <span class="retail-price">Rp {{ order.getTotalPrice() }}</span> 
    <img src="{{ asset('bundles/shopiousmain/img/dashboard-li-down-arrow.png') }}"/> 
</div> 

正如你可以在下面的图片上看到：

它的垂直对齐已被设置为中等。但是，为什么它不是垂直居中？

Answer 1

删除float:right会解决它，但你会失去浮动。 或者，如果你知道元素的高度，你肯定它不会改变，你可以试试这个：

.title-block img { 
    position:absolute; 
    height: 20px; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    margin: auto 0; 
} 

Answer 2

现在习惯了这种您.title-blockposition relative;和你img tagabsolute并定义right:0; top:xxx;根据定义你的设计 ..

.title-block{position:relative;} 
#order-history .data-container-body .data-block .title-block img{ 
float:none; 
position:absolute; 
right:0; 
top:10px; // according to your design set 
}