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

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


     02.06.2015    Стили (CSS)    1087

вопрос
Здравствуйте. Никогда не получалось использовать 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
1 | 2

velex - 2 июня 2015 08:43 - Юзер

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

BRAGA
1

89 | 4

BRAGA - 2 июня 2015 13:09 - Юзер

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

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

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