Сергей

Question

CSS
+1 ещё

LESS: можно ли собирать одинаковые @media в один?

3 подписчика
более трёх лет назад
2282 просмотра

Answer 1 · 2015-02-21 20:49:07

В этом случае я бы добавил отдельный элемент для иконки, так будет универсальнее. А вот для стрелочек справа лучше использовать :after, потому что они одинаковые.

Если текст в меню может быть только в одну строку, то можно отцентровать с помощью line-height. Иконки будут инлайн-блоками, поэтому тоже выровняются относительно центра. Если нужно будет подредактировать их смещение относительно центра, то можно использовать для иконок position: relative и top: 1px, например. Это сместит иконку, но на текст не повлияет.

Если текст может быть в две строки, то просто подберите значение верхнего и нижнего паддинга для строк. Иконки в этом случае можно центровать так:

position: absolute;
top: 50%;
margin-top: -8px /* половина высоты иконки */

Answer 2 · 2015-12-31 15:25:43

Возможно, в момент document.ready не успевают загрузиться какие-то элементы (шрифты), которые влияют на размер контента. Попробуй использовать window.load.

Answer 3 · 2014-10-21 16:30:04

Таким методом вставляются иконки, когда они рисуются через иконочный шрифт или через background (спрайтом). Шрифтовые иконки привязываются через псевдо-элементы :before или :after по классу, а с бэкграундом — просто по классу. Поэтому в обоих случаях нужно, чтобы иконка была в отдельном теге. Можно конечно использовать тег span, но тогда на каждую иконку вы будете использовать лишние 6 символов (3 в открывающем и 3 в закрывающем теге). Тег i короткий и по звучанию ближе всего к «image» или «icon». А с точки зрения семантики здесь нет ничего страшного, т.к. текста внутри тега нет, и он фактически пустой.

Answer 4 · 2015-02-14 17:43:18

А в чём тогда проблема?

.layout {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.5);
}

.layout__inner {
	width: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% -50%);
	background: #fff;
}