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

Question

[Raul Abdullin]

Имеется блок услуги (прикрепляю скрин). SVG иконки для него я превратил в шрифт на сайте https://icomoon.io/
Далее при помощи позиционирования сделал отступы иконок от заголовков (ниже код).
Так вот как центрировать данные иконки? Я попробовал left: 50% сделать, но они почему-то не по центру встают.



Код иконок:

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?6bqhzx');
  src:  url('../fonts/icomoon.eot?6bqhzx#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6bqhzx') format('truetype'),
    url('../fonts/icomoon.woff?6bqhzx') format('woff'),
    url('../fonts/icomoon.svg?6bqhzx#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-chart5:before {
  content: "\e900";
  position: absolute;
  top: -48px;
  left: 50%;
  font-size: 32px;
  text-align: center;
}
.icon-chart6:before {
  content: "\e901";
  position: absolute;
  top: -48px;
  font-size: 32px;
}
.icon-coffee-cup1:before {
  content: "\e902";
  position: absolute;
  top: -48px;
  font-size: 32px;
}

Comments

[Сергей delphinpro]

html в студию.

[Сергей delphinpro]

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

https://jsfiddle.net/bzn9bf5g/

[Raul Abdullin]

Сергей,

<div class="container">
	<h2>Services</h2>
		<div class="row">
			<div class="col-md-4">
				<h3 class="icon-chart5">First Service</h3>
				<p>
					His exquisite sincerity education shameless ten earnestly breakfast add. So we me unknown as improve hastily sitting forming. Especially favourable compliment but thoroughly unreserved saw she themselves. 
				</p>
			</div>
			<div class="col-md-4">
				<h3 class="icon-chart6">Other Text</h3>
				<p>
					Sufficient impossible him may ten insensible put continuing. Oppose exeter income simple few joy cousin but twenty. Scale began quiet up short wrong in in. Sportsmen shy forfeited engrossed may can.
				</p>
			</div>
			<div class="col-md-4">
				<h3 class="icon-coffee-cup1">Best Practice</h3>
				<p>
					Yourself required no at thoughts delicate landlord it be. Branched dashwood do is whatever it. Farther be chapter at visited married in it pressed. By distrusts procuring be oh frankness existence believing instantly if.
				</p>
			</div>		
		</div>
	</div>

[Сергей delphinpro]

raulvodov, ага, так и подумал. ответ выше

[Raul Abdullin]

Сергей, спасибо огромное в очередной раз. А не могли бы в кратце пояснить эту хитрую комбинацию? Я помню когда только начал читать книгу по css, так же надо было какой-то элемент центрировать и он не центрировался пока transform: translatex(-50%) не написал.

[Ярослав Иванов]

raulvodov, Сергей,

left: 0;
right: 0;
margin: auto;

[Raul Abdullin]

Ярослав Иванов, спасибо, тоже работает. До этого пробовал просто margin: auto; Не работает. Но если добавить left и right с нулями, то центрирует. Не подскажите, почему так?

[tema_sun]

raulvodov, сначала сдвигаете вправо на 50% ширины контейнера, потом сдвигаете влево на 50% ширины объекта.

[Raul Abdullin]

tema_sun, понял спасибо большое

[Ярослав Иванов]

raulvodov, помоему все очевидно.

[Сергей delphinpro]

Ярослав Иванов, я бы не назвал этот вариант «очевидным» =)

Answer 1

[iBird Rose]

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