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

Question

[markvasyliev]

Имеются заголовки секций, к которым нужно прикрутить svg и, соответсвенно, корректно отпозиционировать. Ниже код, который я использовал и он работал успешно. В некоторых секциях пришлось убрать общий ограничивающий контейнер, из-за чего картинка сползла влево. Может быть это довольно банальный вопрос, но я был бы благодарен за помощь - за ссылку, объяснение и тд. Всем заранее спасибо!

.title {
   @extend %mul-medium;
   color: #000000;
   font-size: 36px;
   text-align: center;
   position: relative;
}

.title::after {
   content: '';
   width: 118px;
   height: 6px;
   top: 55px;
   left: 400px;
   position: absolute;
   background-image: url(../images/line.svg);
}

Comments

[Вадим]

Уйти от фиксированных значений в позиционировании и перейти на проценты?

[Lord_Dantes]

Псевдо-элементу -
left: 0
right: 0
margin: 0 auto

Answer 1

[Ankhena]

Зачем для этого вообще позиционирование?
https://jsfiddle.net/e1r0zojL/
Или флексами.

Если все таки очень хочется позиционированием, то центр это:

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

Вертикальное позиционирование при этом разумнее считать снизу, а не сверху. Вдруг текста будет на 2 строки?