html - 2 个图像的垂直对齐加上另一个 div 中的一个 div

Question

我试图垂直对齐两个箭头，一个向右箭头 (id="freccia-destra")，一个向左箭头 (id="freccia-sinistra" >) 和一个包含 2 张照片的 div (id="div_galleria")。

这3个元素都在id="div_3"里面；

如何垂直对齐它们？

这是 CSS + Html 代码:

#div_3{
    
display: inline;
    
}

.r {
    
    display: inherit;
    
}

        <div id="div_3" width="100%" height="830" align="center">
            <img class="r" id='freccia_sinistra' src="freccia_sinistra.png" height="100px" onclick="sinistra()">
            <div class="r" id='div_galleria' width="95%" height="800" align="center"></div>
            <img class="r" id='freccia_destra' src="freccia_destra.png" height="100px" onclick="destra()">
        </div>

Answer 1

#div_3{
    
display: inline;
    
}

.r {
    
    display: inherit;
    vertical-align: middle;
    
}

<div id="div_3" width="100%" height="830" align="center">
            <img class="r" id='freccia_sinistra' src="http://placekitten.com/g/50/100" height="100px" onclick="sinistra()">
            <div class="r" id='div_galleria' width="95%" height="800" align="center">
                    <img class="r" id='' src="http://placekitten.com/g/50/100" height="200px" onclick="sinistra()">
                    <img class="r" id='' src="http://placekitten.com/g/50/100" height="300px" onclick="sinistra()">
            </div>
            <img class="r" id='freccia_destra' src="http://placekitten.com/g/50/100" height="100px" onclick="destra()">
        </div>

如果您的显示是行内或行内 block ，请使用垂直居中