Как выравнить логотип по центру?

Question

[Raul Abdullin]

Имеется логотип, который состоит из h1 для текста лого и before для иконки рядом с текстом.
Этот лого нужно выровнить по центру.
Если вставить этот код

left: 50%;
transform: translateX(-50%);

То браузер видит только h1, т.е. центрирует ее относительно экрана.
Попробовал подобрать left: 47%, на большом экране хорошо смотрится, но стоит уменьшить размер браузера, то лого уже не по центру. Как наиболее рационально решить ситуацию? Строго не судить, т.к. это можно сказать моя первая верстка :)

Answer 1

[MrGaunt]

Сделайте у логотипа padding-left: {размер псевдоэлемента + отступ}, а у :before left: 0 вместо отрицательного. Благодаря padding в размер логотипа будет входить псевдоэлемент и transform: translateX(-50%) даст нужное значение.

Comments

[Andrew]

Вы тоже юзаете padding и transform для центрирования элементов?
Как парковать машину краном...

[MrGaunt]

Andrew, я дал ответ, решающий проблему человека в конкретном случае. Tranform использует автор, а не я (если вы читали вопрос).

Вы пишите ему советы с flex и margin: 0 auto, когда у него не получается отцентрировать логотип как раз из-за absolute псевдоэлемента...

[Andrew]

MrGaunt, об абсолютке я узнал после того как скинули код(после ответа).
Вопрос "Как выравнить логотип по центру?"

Этот лого нужно выровнить по центру.

Далее человек попробовал сделать по-своему.
Я предложил более интуитивно и рационально правильное решение(ответ на вопрос), вы же попробовали его "костыль, чуть подточить", не кажется ли вам, что на этом этапе, человеку нужно дать направление "чуть" более верное, нежели заставлять его идти по его пути чуть дальше? жду ответа вида "кажется" или "не кажется", спасибо.

[MrGaunt]

Вы дали ему ответ, но он не решал его вопрос. Не даете ему идти дальше по "неправильному пути", зато рисуете вторую дорогу, пусть и более рациональную. Только без дополнительного комментария это всё также ведет в тупик.

[Raul Abdullin]

Andrew, да я вообще не понял, что вы предлагаете, Андрей, с помощью абсолюта я позиционировал иконку относительно надписи. А как еще если не с помощью абсолюта ее позиционировать?

[Raul Abdullin]

MrGaunt, так же не понял, как сделать? Before позиционируется относительно h1, т.е. иконка относительно текста. Если я у иконки буду менять left, то она уедет или в этом и заключается способ?

[MrGaunt]

raulvodov, https://jsfiddle.net/verhf8r1/11/ вот несколько способов. Далеко не все, но выбрать из них подходящий можно.

[Raul Abdullin]

MrGaunt, большое спасибо

[Raul Abdullin]

MrGaunt, единственное хотел уточнить, почему именно padding-left, а не margin-left? Просто и так, и так работает, но фот паддинг это же внутренний отступ

Answer 2

[Andrew]

Это всё в div'e?
Если нет, то оберни в div и поставь

.etot-div {
margin: 0 auto;
}

ну или всему footer'у

.footer {
display: flex;
justify-content: center;
}

Comments

[Raul Abdullin]

Попробовал, обернуть, не выравнивает:

.icon-iconmonstr-infinity-1:before {
  position: absolute;
  content: "\e900";
  font-size: 40px;
  top: -9px;
  right: 151px;
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer h1 a {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	color: #fff;
  top: 34px;
}

.footer h1 a span {
	font-size: 1.8rem;
	font-weight: 300;
}

.footer .footer-logo {
	margin: 0 auto;
}

<div class="footer-logo">
			<h1><a href="#" class="icon-iconmonstr-infinity-1"><span>Creative</span> Box</a></h1>
		</div>

[Andrew]

raulvodov, а

.icon-iconmonstr-infinity-1:before {
  position: absolute;
...
}

вас не смущает?
у вас элемент(лого) привязан к .icon-iconmonstr-infinity-1
он будет равняться с ним, зачем вам абсолютка там?

[Andrew]

raulvodov,

.icon-iconmonstr-infinity-1:before {
  content: "\e900";
  font-size: 40px;
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer .footer-logo {
  text-align: center;
}

Эти 2 блока стилей измените и должно быть счастье.

[Raul Abdullin]

Andrew,

[Andrew]

raulvodov, закиньте весь блок в codepen, я не знаю какие еще стили на него действуют.
(все top,left,right,bottom уберите)

[Raul Abdullin]

Andrew, вообщем получилось с помощью:

left: calc(50% - 35px);
  transform: translateX(-50%);

Не могу понять почему именно 35px, но чувствую что путем тыка сделал, что неправильно.
Вот закинул сюда https://jsfiddle.net/vr4x8e2q/7/ но там иконка не отображается, т.к. шрифт для иконки лого лежит в локальной папке, даже не знаю, как закинуть его в эту систему

[Andrew]

raulvodov,

стили

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?t475wf');
  src:  url('../fonts/icomoon.eot?t475wf#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?t475wf') format('truetype'),
    url('../fonts/icomoon.woff?t475wf') format('woff'),
    url('../fonts/icomoon.svg?t475wf#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-iconmonstr-infinity-1:before { 
  content: "\e900";
  font-size: 40px;
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer {
  width: 100%;
	height: 190px;
	background-color: #FB7DA4;
	background-image: linear-gradient(to right, #FBA9A2, #FB7DA4);
  text-align: center;
}

h1 a {
	position: relative;
  text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	color: #fff;
  top: 34px;

}

h1 a span {
	font-size: 1.8rem;
	font-weight: 300;
}

м?
убрал абсолютку и все left,right.
добавил в .footer
text-align: center;

[Raul Abdullin]

Andrew, не совсем понял, у какого элемента убрали абсолют?

[Raul Abdullin]

Andrew, если убрать абсолют у бефо, то иконку относительно текста не получится позиционирвать