Bootstrap - 垂直对齐中间div中的图像

Question

我有一个div，其中有6张图片，包括左箭头和右箭头。左侧和右侧箭头分别向左和向右浮动。我想要做的是我想在div的中间对齐它们。这是我得到的输出：

正如您所看到左侧和右侧箭头未在中间正确对齐。我怎么能这样做？

这是我的HTML：

<div class="row" id="timer-wrap" style="margin-top: 50px;">
    <img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
    <div id="timer" class="text-center">
        <img src="img/timer/days.png" />
        <img src="img/timer/hours.png" />
        <img src="img/timer/minutes.png" />
        <img src="img/timer/seconds.png" />
    </div>
    <img class="pull-right" src="img/right_arrow.png" id="right_arrow" />
</div>

这是我的CSS：

#timer img {
    padding: 10px;
    min-width: 121px;
    max-width: 100%;
}

我尝试使用display: table-cell; vertical-align: middle;，但这不起作用，因为它将每个图像分解为一个新行。我能做什么？ 我正在使用Bootstrap。

提前致谢。 ：）

Answer 1

试试这个：

从箭头

中删除pull-left和pull-right类

将它放在css文件中

#left_arrow,
#right_arrow{
   position:absolute;
   top:50%;
   -webkit-transform:translateY(-50%);
   -moz-transform:translateY(-50%);
   -ms-transform:translateY(-50%);
   transform:translateY(-50%);
}
#left_arrow {
   left: 0;
 }
#right_arrow {
   right: 0;
 }

确保外部容器的位置设置为相对值，绝对值或固定值。

修改 编辑过的箭头名称

Answer 2

如果div的高度是固定的，你可以将箭头图片的高度调整到相同的高度，并将这些图片的箭头居中......