V-Blog

Задача: выровнять контент по середине вертикально, с помощью CSS

Решение: Код CSS и пример разметки HTML ниже. Ширину класса vblog_middle можно настраивать под себя.

<!-- код разметки CSS -->

<style>
.panel {
display: block;
border: 1px solid #e2e2e2;
box-shadow: none;
margin-bottom: 20px;
}

.panel-body {
padding: 15px;
}

.text-center {
text-align: center;
}

.vblog_display {
display: table;
width: 100%;
}

.vblog_middle {
height:130px;
display: table-cell;
vertical-align: middle;
}
</style>

<!-- код разметки HTML -->

<div class="panel text-center">
<div class="panel-body vblog_display">	
    
<div id="v_content" class="vblog_middle"> 
Тут любой контент
</div>
  

</div> <!-- panel-body -->
</div> <!-- panel -->

 

Примеры работы кода:

С изображением

выравнивание по вертикале и по центру

С рекламным блоком РСЯ

РСЯ выравнивание блока вертикально

С текстом

выравнивание вертикально блока с текстом