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的中间_1。

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

Answer 1

你的代码应该是这样的：

的CSS：

   #right_1 {
   position:relative;
   }

   #right_1 img {
   position:absolute; 
   right:50%; 
   margin-right:-25px; 
   top:50%; 
   margin-top:-30px;
   }

我认为最好使用像素而不是％。祝你好运

Answer 2

为父div申请position:relative;并申请

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

表示要垂直居中的元素......

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

申请

display:flex;
align-items:center;

为父div。

将图像设置在子div的中心

2 个答案: