Search code examples
htmlcssvertical-alignment

HTML vertical align a float:right element

I'm trying to vertically align a float:right element in a div.

this is my 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;
}

And 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>

So <span class="right"> should be in the right and middle of <div class="row">

Like this: https://dl.dropboxusercontent.com/u/21559131/Untitled-1.png

Solution

  • You could do this by setting the line-height from your .right element equal to the heigth of the parent. (.row), but since (i suppose) the height is unknown, i don't think using this with float:left is the best solution. (it's very hard with floats!)

    Another way of doing this is using a trick with display:absolute. watch this:

    .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!

    check out the full code on JSFiddle

    btw, if you would be worried about browser support, this solution is very well supported. http://caniuse.com/#search=transform