CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Bootstrap - Vertically aligning the images in a div in the middle

I have a div in which I have 6 images including a left and a right arrow. Obivo, the left and the right arrow are floated towards the left and the right respectively. What I want to do is that I want to align both of them in the middle of the div. This is the output that I am getting:

Output

As you can see that the left and the right arrows are not aligned properly in the middle. How can I do that?

Here's my 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>

And here's my CSS:

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

I've tried using display: table-cell; vertical-align: middle; but that doesn't work as it breaks down every image into a new line. What can I do? I am using Bootstrap.

Thanks in advance. :)

Upvotes: 1

Views: 457

Answers (2)

Konrad Wąsowicz
Konrad Wąsowicz

Reputation: 432

Try this:

remove pull-left and pull-right class from arrows

Put this in css file

#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;
 }

Just make sure outer container has position set to relative, absolute or fixed value.

Edit Edited arrow names

Upvotes: 1

Vinm
Vinm

Reputation: 129

If the height of the div is fixed, you can ajust the height of the arrows pictures to the same height, and center the arrows on these pictures...

Upvotes: 0

Related Questions