Html 垂直对齐不'；行不通

这是怎么回事

我想垂直对齐右边的箭头，使其位于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>

{{order.getCreated（）| date（'md，Y'）}
发票{{order.getInvoice（）.getInvoiceNumber（）}
Rp{{order.getTotalPrice（）}

如下图所示：

---

它的“垂直对齐”已设置为“中间”。但是，为什么它没有垂直居中？

删除浮动：右将修复它，但随后将丢失浮动。 或者，如果您知道图元的高度，并且确信它不会改变，则可以尝试以下方法：

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

---

现在用于定义您的

。标题栏
相对位置
和您的
img标签
绝对
并定义
右侧：0；排名：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 
}

删除float:right，而不是用于垂直对齐：middle你能试试
。标题栏>*{vertical align:middle；}
一次吗？@RohitAzad，但我希望img位于右侧。@Ronak我把它放在哪里？垂直对齐只适用于内联*或表格单元格元素。浮动一个元素会将其显示类型更改为两者都不是。这是硬编码，没有办法只是垂直对齐它，这样当我更改div高度时，它会自动居中…我不明白，我基本上想通过使用垂直对齐来消除使用top:x px