html - 将图像设置在子 div 的中心

Question

我的代码是这样的

<div id="main_1" style="background-color: #FFD993;
        color: darkbrown;
        border: 1px outset #A61C14;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px; width:100%;height:20%;text-align:center;margin-bottom:10px;">

        <div id="left_1" style="background-color: ;border: 1px;
         width:60%; height:90%;text-align: center; float:left;">


        </div>
        <div id="middle_1" style="background-color: ;border: 1px;
         width:20%; height:100%;text-align: center; float:left;">
        <img src="numb/equal.png" alt="Klematis" width="100%" height="50%">
        </div>
        <div id="right_1" style="background-color: ;border: 1px;
         width:20%; height:100%;text-align: center; float:right;" >

         <img src="numb/1.png"alt="Klematis" width="50px" height="60px">
        </div>

              </div>

我希望图像 1.png 垂直显示在 div right_1 的中间。

搜索了很多，但没有任何帮助。请帮忙。

Answer 1

为父div应用position:relative;并应用

position:absolute;
top:50%;
margin-top:-30px; // height of element/2
}

让元素垂直居中……

如果古老的浏览器支持不是问题，您可以使用 css3 flex，

申请

display:flex;
align-items:center;

对于父 div。