Bootstrap-在中間的div中垂直對齊圖像

Question

我有一個div，其中有6張圖片，包括左箭頭和右箭頭。 Obivo的左箭頭和右箭頭分別向左和右浮動。 我想做的是將兩個都對准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; 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的高度是固定的，則可以將箭頭圖片的高度調整為相同的高度，並將箭頭居中於這些圖片上...