Question

我试图在div中垂直对齐float：right元素。

这是我的css：

.row {
     border-radius:25px;
     background-color:#242424;
     padding:2px 15px;
     margin:5px 0;
}

.right{
     float: right;
     vertical-align:middle;
}

div#card {
     background-color:#33AD5C;
     text-align:left;
     font-family:RobotoMedium;
     color:#33AD5C;
     height:300px;
     margin:50px;
     border-radius:10px;
     padding:20px;
     box-shadow: 4px 4px 7px #000;
}

和html：

<div id="card" class="shadow">
    <div class="row">
        <span class="right">Download</span>
        <span> 
            Test <br /> 
            <span class="md5">
                 <sup> MD5: 6484968049684984</sup>
            </span>
        </span>
    </div>
</div>

因此<span class="right">应位于<div class="row">

的右侧和中间位置

像这样：https://dl.dropboxusercontent.com/u/21559131/Untitled-1.png

Answer 1

您可以通过将line-height元素中的.right设置为等于父级的高度来实现此目的。（.row），但由于（我猜）高度未知，我不认为使用此float:left是最佳解决方案。（漂浮物非常难！）

另一种方法是使用display:absolute的技巧。看这个：

.row {
     /*to make this work, we first need relative positioning in the parent*/
     position:relative;


     /*test height. this is not required.
      if you don't believe me, change this height.
      the .right element will always stay in the middle! */
     height: 150px;
}

.right {
     /*then, we set your element to position absolute*/
     position: absolute;

     /*place the element to the right*/
     right:1em;

     /*set top to 50%*/
     top:50%;

     /*move your element back up 50% of it's own height, 
       to get perfectly centered */
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%); /*safari*/
     -ms-transform: translateY(-50%); /*IE 9. not really necessary, 
                                        but just for these 1.8% of the users 
                                        that sill use it*/
}

ta dah！

查看JSFiddle

上的完整代码不过，如果你担心浏览器支持，这个解决方案得到了很好的支持。 http://caniuse.com/#search=transform

HTML vertical对齐float：right元素

1 个答案: