Форум Сайтостроение Веб-строительство

Помогите с CSS

J
На сайте с 08.06.2006
Offline
844
joost
388

Нужно сделать блок в рамке, в нем слева картинка, справа текст, текст по центру по высоте. 

.lb_border

{ 

font-size: 100%;

background-color: white;

width: 500px;

height: 140px;

margin: 5px;

vertical-align: central;

border-color: red; 

}

.lb_in

{ 

font-size: 100%;

background-color: white;

width: 450px;

height: 120px;

margin: 5px;

align-content: center;

}

.img_margin

{ 

margin: 5px;

}

Сделал блок с рамкой больше, а в нем с белым фоном меньше

Есть две проблемы

1. рамка border-color: red; не отображается

2. не знаю как текст по центру по высоте выровнять

SS
На сайте с 15.12.2015
Offline
83
SERM-service
#1

Что бы рамка отобразилась нужно еще толщину указать и тип например

border: 2px solid red;

про vertical-align

Свойство vertical-align работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.
Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
melkozaur
На сайте с 06.04.2010
Online
532
melkozaur
#2

joost,

Намешано слишком много всего отовсюду.

Не делайте так. Найдите нормальный пример и не тупо копируйте куски, а разберитесь - что там и зачем и почему оно работает.

Если я правильно понял структуру:

.lb_border { display: flex; justify-content: space-between; background-color: white; border: 10px solid red; padding: 10px; box-sizing: border-box; }
.lb_in { width: 75%; align-self: center; }
img.img_margin {display: block; max-width: 25%; height: auto; margin-left: 10px; align-self: center; }

<div class="lb_border">
<div class="lb_in">Текстовый блок</div>
<img class="img_margin" src="Картинка.жпг">
</div>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий