Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как сделать вертикальное центрирования картинки относительно высоты блока?

Как сделать вертикальное центрирования картинки относительно высоты блока?


     02.06.2015    Все вопросы » Стили (CSS)    2494

вопрос
Здравствуйте. Никогда не получалось использовать vertical-align: middle;. В следствии чего, есть к вам вопрос.
Объяснил, что я хочу и как на данный момент есть на скрине.
Слева вверху 2 блока. В первом все хорошо из-за того что текст не вылазит из-за рамок. Сразу под ним второй аналогичный блок, но в нем текста больше и он залазит под картинку. А я хотел чтобы было как у блока справа. Текст имел ширину, а картинка центрировалась относительно высоты блока. Как такое реализовать?
Как сделать вертикальное центрирования картинки относительно высоты блока?

Ответил: BRAGA


Может кому-то пригодится.
Html
<div class="block">
    <div class="imgblock"><img src="картинка"></img></div>
        
    <div class="txtblock">Текст</div>    
</div>


CSS
.block {
  display: block;
  width: 95%;
  height: auto;
  margin: 10px;
  padding: 10px;
  border: #000 1px solid;
}

.imgblock {
   display: table-cell;
   vertical-align: middle;
   width: 15%;
   padding: 5px;
}

.txtblock {
    display: table-cell;
    width: 85%;
    padding: 5px;
}

2 комментария

velex
Юзер

velex - 2 июня 2015 08:43 -

Посмотри, может это Пример на jsfiddle.net

BRAGA
Юзер

BRAGA - 2 июня 2015 13:09 -

velex, большое спасибо, я думаю мне это подойдет.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх