Html 垂直对齐div内部div

我试着将这里的两个箭头垂直对齐到图像的中心

我的html是：

<figure class="item">
    <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>
    <h2>Time Traveller #1 of 3</h2>
    <p class="artDetails artMedium">watercolour</p>
    <p class="artDetails artSize">20 x 30 inches</p>
</figure>

---

一种方法是使用

position:absolute与相对父级。请尝试以下操作：

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

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

编辑：

我在箭头和图像周围添加了一个div。然后这个解决方案就起作用了。
将箭头和
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>


满足于此
#父项{显示：表格；宽度：100%；高度：400px；边框：1px#000实心；}
#孩子{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
边框：1px#000实心；
}

解决方案可能非常简单，只需将
垂直对齐：中间
应用于三幅图像即可

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

因为您使用的是一个滑块（jQuery插件？），所以可能会有其他CSS规则发生冲突，所以您需要应用一个足够具体的选择器

此外，如果涉及任何JavaScript/jQuery，那么主图像和箭头可能会被绝对定位，然后，这可能会改变情况。魔鬼在于细节


.item img{
垂直对齐：中间对齐；
}

时间旅行者#第1页，共3页
水彩画

20 x 30英寸
有很多关于垂直的教程，以谷歌为中心，尝试了不同的加载方式，但它从来都不起作用
垂直对齐
仅适用于内联元素，如果你不使用flexbox，最好的办法是使用它，但通过将
位置：相对
添加到父对象会弄乱幻灯片，您可能需要重新格式化代码以使其正常工作。具有仅包含滑块内容（图像）和箭头的父容器。如果可能的话，把寻呼机放在外面。正在工作，但请只发布有效的（！）HTML。你的IMG.标签永远不会关闭。对，就像我只是复制了用户的代码，而我没有注意到这一点。。莱利是真的，但我自己喜欢关闭这些标签：）“不需要”并不意味着它有权使用糟糕的HTML。这不是一个关于“最新”的问题。他们只是做了一个傻瓜保存，因为许多傻瓜正确地关闭他们的标签是愚蠢的，所以这会造成问题。HTML5的编程仍然很糟糕。在你的页面上有很多这样的“无需”元素，你可以看到“无需”的确切含义。“不需要”只是意味着浏览器可以处理您的错误。这只需要很少的时间。因此，由于有很多元素，您的站点需要稍长的时间来加载，这只是因为您懒得编写好的HTML（5）。
<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>

.view {
position: relative;
}

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

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