There is a parent unit:

.parent{ height:500px; }

He has a child block:

 .children{ float:left; height: 50%; }

Here was the question of how to align it vertically for an adaptive site, so that with different screen formats you would not need to count the margin-top: 10px, etc.

  • Make the code more complete so that it can be played. - borodatych
  • Here is an example jsfiddle.net/k4Lcmdhb/4 - user206303

2 answers 2

This option works for adaptive vertical alignment.

  .parent{ background-color: blue; height: 500vh; position: relative; } .child{ background-color: red; position: relative; width: 50%; height: 50%; float: left; top: 50%; transform: translateY(-50%); }

Jsfiddle

Support for the transform property by various browsers

    I dare to assume that you are talking about such a case:

     <style> .clear{ clear: both; } .css1,.css2{ vertical-align:middle; line-height: 38px; } .css1{ float:left; font-size: 38px; } .css2{ float:right; font-size: 13px; } .border-red{ border: 1px solid red; } </style> <div class="border-red"> <span class="css1">Hellow</span> <span class="css2">World</span> <div class="clear"></div> </div>

    jsFiddle

    • Here is an example, you need to do them in the center of the vertical, like ..? jsfiddle.net/k4Lcmdhb/4 - user206303
    • If paren height 500px , then it is quite possible and so - borodatych
    • If the height is dynamic and 300 for example, then it can be like this - borodatych
    • With display: inline-block; everything works fine, I can't figure out how to float: left || float: right; vertically align - user206303
    • Unfortunately, with float will have to use line-height , as in the first version in the comment. - borodatych