垂直对齐不起作用

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-block position relative;和img tag absolute并定义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 
}