Как выровнять блок position: absolute; по центру?

Question

[freeman0204]

Нужно сверстать такую шапку screenshot.ru/87a75f16a0a8047746cf2202b561b1d8 дал логотипу position: absolute; что бы выбить с потока и расположить между меню, но он не хочет становится по центру, даже если прописать
left: 50%;
margin-left: 585px;
Как поставить блок logo по центру? и может у вас есть более лучшая идея реализовать такую шапку?
Забыл дать код codepen.io/anon/pen/epvPqM

Comments

[freeman0204]

Забыл дать код codepen.io/anon/pen/epvPqM

Answer 1

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

Вы явно ошиблись с отступом, если хотите сделать по центру, то если logo 50x50:

left: 50%;
margin-left: -25px; /* половина ширины logo */

либо вместо margin
transform: translateX(-50%);

Answer 2

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

Я вижу тут список с выравниванием элементов по центру, четвертый из которых - логотип.

Немного стремная реализация

Comments

[freeman0204]

Я тоже так подумал сразу. Но это будет нормально с точки зрения семантики впихнуть лого в список с навигацией?

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

Артур Черешнюк: пускай логотип будет в виде картинки, обернутой в ссылку на главную страницу. А вообще, нормально, я думаю.

Answer 3

[Андрей Федоров]

А зачем вы дали для лого и left и margin? Уберите margin и все получится.

.logo {
	position: absolute;
	left: calc(50% - .6em);
  background: #000;
  font-size: 4em;
  width: 1.2em;
  text-align: center;
}

Comments

[freeman0204]

Я обычно пишу только шрифт в em. А у вас всё. Это дело вкуса или так лучше писать? Я даже на практике пока не понял разницы между px и em, знаю что px это статика а em как я понял растягивается. Но как я сказал на практике разницы не увидел.

[Андрей Федоров]

em лучше писать там, где размеры имеют прямое отношение к размерам вложенного текста. например, кнопки. лучше указывать у них отступы в em, т.к. указанные в px отступы будут смотреться несогласованно, если сделать шрифт больше.

и как общее правило - нужно как можно больше загружать браузер расчетами, а не считать самому. это сразу даст адаптивность дизайна практически без усилий.

[freeman0204]

Андрей Федоров: Ясно, спасибо)

Answer 4

[Егор]

Bootsnipp

Comments

[freeman0204]

А что это за сайт? Это уже было готовое меню или вы сами написали? Это что то типа codepen.io ?

[Егор]

Написано не мной... Bootsnipp is an element gallery for web designers and web developers created by Maks

[freeman0204]

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

[Artem Borovikov]

Артур Черешнюк: готовые решения с использованием bootstrap