As in the existing example, to make the block with text vertically always aligned in the center, regardless of the size of the image (it may be different)?

.box { border: 1px solid black; min-width:250px; text-align: center; height: 500px; float: left; margin: 0 0 0 1% } 
 <div class="box"> <img src="http://photomotion.ru/uploads/users/1/1226568467.jpg" alt=""/> <div> <p>Какой-то текст. Заголовок</p> <p>Какой-то текст</p> </div> </div> <div class="box"> <img src="http://photomotion.ru/uploads/users/1/1226568530.jpg" alt=""/> <div> <p>Какой-то текст. Заголовок</p> <p>Какой-то текст</p> </div> </div>

  • img text img {visibility: hidden} - etki

2 answers 2

Maybe so? http://jsfiddle.net/HA3IK/Z6NnQ/

 <table class="tbl"> <tr> <td valign="middle" align="center"> <img src="http://photomotion.ru/uploads/users/1/1226568467.jpg" alt="img"/> </td> </tr> <tr> <td valign="middle" align="center"> <p>Какой-то текст. Заголовок</p> <p>Какой-то текст</p> </td> </tr> </table>
  • one
    I always underestimate the tabular layout, it's time to stop comparing them as better and worse ... - Andrei Talanin

See solution

html

 <div class="box"> <img class="logo" src="http://photomotion.ru/uploads/users/1/1226568467.jpg" alt="" /> <div class="text-wrapper"> <div class="text"> <p>Какой-то текст. Заголовок</p> <p>Какой-то текст</p> </div> </div> </div>

css

 .box { display: table; float: left; height: 500px; margin: 0 0 0 1%; min-width:250px; text-align: center; } .logo { display: table-row; margin: 0 auto; } .text-wrapper { display: table-row; height: 100%; } .text { display: table-cell; vertical-align: middle; }