HTML 垂直对齐 float:right 元素

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

您可以通过将 .right 元素中的 line-height 设置为父元素的高度来实现。 (.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*/
}

哒哒！

查看 JSFiddle

上的完整代码

顺便说一句，如果您担心浏览器支持，这个解决方案得到了很好的支持。 http://caniuse.com/#search=transform

HTML 垂直对齐 float:right 元素

HTML vertical align a float:right element

html

css

vertical-alignment