Vertical-align как правильно использовать?

Question

[freeman0204]

Прочитал статью по Vertical-align web-standards.ru/articles/vertical-align но пока не получается выровнять. Вот мой код codepen.io/anon/pen/OyXgxd . Intent. выровнял а i не могу. И интересно то что если убрать с .logo a vertical-align: middle; то на Intent не работает. Как выровнять и Intent и i?

Answer 1

[Виталий Инчин ☢]

Юзайте padding, я вас умоляю:

.logo a {
	color: #fff;
	padding: 6px 12px;
	background-color: #ea5a4b;
	display: inline-block;
	text-align: center;
}

Comments

[freeman0204]

Как я понимаю так семантически правильней паддингом?

[Виталий Инчин ☢]

Артур Черешнюк: дело не в семантике (хотя и в ней тоже - не круто задавать текстовым элементам размеры с помощью width/height), а в том, что вы пытаетесь усложнить себе жизнь.

Vertical-align относится к свойствам, которые используются не так уж часто, когда другие не помогают, а padding - вполне обыденное свойство, которое принято использовать в том числе примерно для того, что вы хотите сделать.

[freeman0204]

Виталий Инчин: "не круто задавать текстовым элементам размеры с помощью width/height), а в том, что вы пытаетесь усложнить себе жизнь. " Я Задал ссылке display: inline-block; и потом задал высоту и ширину. Так не делают? Как было бы правильней?

[Виталий Инчин ☢]

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

Так не делают? Как было бы правильней?

Так делают, но не в данной ситуации - сейчас это бессмысленно.
Как было бы правильнее я уже показал.

[freeman0204]

Виталий Инчин: Понял, спасибо!

Answer 2

[#rybak]

добавь код

.logo a {
  line-height: 33px;
}

добавлено позже -------------------------------
Вот еще вариант, если использование свойства vertical-align- принципиально.
<a href="#"><i>i</i><span>Intent.</span></a>

a {
  display: block;
  height: 34px;
  text-decoration: none;
  float: left;
  color: black;
  font-family: Arial;
  }
i {
  font-style: normal;
	color: #fff;
	width: 34px;
  height: 34px;
	background-color: #ea5a4b;
	text-align: center;
  display: table-cell;
  vertical-align: middle;
  }
span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}

Comments

[freeman0204]

На скрине screenshot.ru/6cb9914f5d1f0424954a57847d1bcf9d шрифт 24px line-height 16px что в переводе в em ровняется 1.500em и 1.000em. Ставил и в px и в em. Результат не как в макете. line-height: 33px; но как я понимаю это взято на глаз? Почему когда ставлю размеры как в макете то не работает?

[Кирилл Туровников]

Центровка в блоках строчных элементов и изображений с использованием line-height = height блока нормальная практика, если конечно не использовать flex и табличную верстку, последнее крайне не рекомендуется.

[#rybak]

Артур Черешнюк: в фотошопе значения указаны в pt а не в px. Это немножко разные вещи.
К тому же я подозреваю, что line-height 16px - не имеет никакого отношения к высоте розового блока.
Скорей всего розовый блок вообще лежит на отдельном слое, я прав?

[Кирилл Туровников]

И как следствие проще всему .logo добавить line-height:34px;

[freeman0204]

#rybak: Скорей всего розовый блок вообще лежит на отдельном слое, я прав? Не совсем понял о чем речь и о каких слоях?

[#rybak]

Артур Черешнюк: в фотошопе слои.

[freeman0204]

#rybak: Да на отдельном. Что это может значить?

[#rybak]

Это значит что на параметр line-height 16px вообще не нужно смотреть.
Для верстки этого логотипа из макета нужно взять только:
- цвета,
- семейство шрифта,
- размер шрифта,
- жирность шрифта,
- размер розового блока,
- размеры отступов.
и все получится.
Высота линии в макете (в данном случае) ни на что не влияет.

[freeman0204]

#rybak: зачем брать - размер розового блока, если мы отступим с помощью падингов? Как вы написали нужно взять - размеры отступов.

[#rybak]

Важно соблюдать точные размеры блоков из макета.
Здесь очень кстати станет css свойство box-sizing: border-box;
Если его прописать, то паддинги будут работать немножко по другому.

Если будешь выравнивать паддингами то рекомендую делать это так:
- задать точные размеры блока (там вроде 34х34 было)
- задать этому блоку свойство box-sizing: border-box;
- после чего ковырять паддинги.