html - 垂直对齐不起作用

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

现在习惯了这个Define your .title-block position relative;and yourimg 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 
}