HTML vertical align a float: правый элемент

Question

Я пытаюсь вертикально выровнять поплавок: правый элемент в div.

это мой 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

You может сделать это, установив 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*/ 
} 

те Д!

проверить полный код на JSFiddle

Кстати, если вы будете беспокоиться о поддержке браузера, это решение очень хорошо поддерживается. http://caniuse.com/#search=transform