Question

我试图将这两个箭头对齐http://media.gaigo.org/work2.html#item-1，以垂直对齐图像的中心。

我的HTML是：

.content .carousel .item .arrow {
    display: inline-block;
    vertical-align:middle;
}

我的css是：

{{1}}

Answer 1

实现此目的的一种方法是将position: absolute;与相对父级一起使用。请尝试以下方法：

.content .carousel .item .arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -57px;
}

注意：您需要进行调整以使图像居中。

修改

我在箭头和图像周围添加了一个div。然后这个解决方案有效。

Answer 2

将箭头和img包裹在一个div中，就像这样 -

<div class="view">
    <a href="#item-18"><img class="arrow left" src="static/img/leftarrow.png"></a>
    <img src="static/img/WorkPicture.png">
    <a href="#item-2"><img class="arrow right" src="static/img/rightarrow.png"></a>
</div>

然后添加此css -

.view {
position: relative;
}

#item2, #item18 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#item2 {
right: 0;
}

Answer 3

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {display: table; width:100%; height:400px; border:1px #000 solid;}

#child {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    border:1px #000 solid;
}

https://jsfiddle.net/pw63g1gv/

Answer 4

解决方案可以像将vertical-align: middle应用于三个图像一样简单。

默认情况下，您的图片是内联元素，因此应用以下CSS规则可能会解决问题。

因为您正在使用滑块（jQuery插件？），可能存在其他可能冲突的CSS规则，因此您需要应用足够具体的选择器。

此外，如果涉及任何JavaScript / jQuery，主图像和箭头可能是绝对定位的，然后，这可能会改变一些事情。魔鬼在细节中。

.item  img {
  vertical-align: middle;
}

<figure class="item">
    <a href="#item-18"><img class="arrow left" src="http://placehold.it/50x100"></a>
    <img src="http://placehold.it/400x300">
    <a href="#item-2"><img class="arrow right" src="http://placehold.it/50x100"></a>
    <h2>Time Traveller #1 of 3</h2>
    <p class="artDetails artMedium">watercolour</p>
    <p class="artDetails artSize">20 x 30 inches</p>
</figure>

垂直对齐div内的div

4 个答案: