[英]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. 我有一个div,其中有6张图片,包括左箭头和右箭头。 Obivo, the left and the right arrow are floated towards the left and the right respectively.
Obivo的左箭头和右箭头分别向左和右浮动。 What I want to do is that I want to align both of them in the middle of the div.
我想做的是将两个都对准div的中间。 This is the output that I am getting:
这是我得到的输出:
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: 这是我的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: 这是我的CSS:
#timer img {
padding: 10px;
min-width: 121px;
max-width: 100%;
}
I've tried using display: table-cell; vertical-align: middle;
我试过使用
display: table-cell; vertical-align: middle;
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.
我正在使用Bootstrap。
Thanks in advance. 提前致谢。 :)
:)
Try this: 尝试这个:
remove pull-left
and pull-right
class from arrows 从箭头中删除
pull-left
pull-right
类
Put this in css file 把它放在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;
}
Just make sure outer container has position set to relative, absolute or fixed value. 只要确保外部容器的位置设置为相对,绝对或固定值即可。
Edit Edited arrow names 编辑编辑的箭头名称
如果div的高度是固定的,则可以将箭头图片的高度调整为相同的高度,并将箭头居中于这些图片上...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.