There is a main unit, in which there are 3 more blocks, I would like to arrange them in a line and strictly in the center, vertically.

<div class="container"> <div class="block"> <p> Some text </p> </div> <div class="block"> <p> Some text Some text Some text Some text Some text </p> </div> <div class="block"> <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png" alt="#"> </div> </div>

For example jsfiddle

It is also necessary that the border remains the same height, please tell me how to do this?

    1 answer 1

     .container{ padding: 20px; border: 1px solid #e2e2e2; margin: 5px; text-align: center; display: table; position:relative; height:500px; } .block{ width: 23%; display: table-cell; vertical-align:middle; border-left: 1px solid #e2e2e2; padding: 20px; text-align: center; font-size: 20px; } 
     <div class="container"> <div class="block"> <p> Some text </p> </div> <div class="block"> <p> Some text Some text Some text Some text Some text </p> </div> <div class="block"> <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png" alt="#"> </div> </div>