Горизонтально центр объекта внутри параллелограмма

Question

У меня сейчас есть параллелограмм, созданный с div и свойством css clip-path. Эта форма также прикреплена к нижней и нижней части экрана с динамической шириной c. Я пытаюсь понять, как центрировать содержимое по горизонтали (а не по вертикали).

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

До сих пор я пытался использовать отступы слева и справа, поля в процентах и ​​пути обрезки содержимого внутри div безрезультатно.

Я прикрепил кодовую ручку к тому месту, где я сейчас нахожусь. Любая помощь будет принята с благодарностью.

Answer 1

Вам необходимо добавить

text-algin-center;

к вашим .sidebar-callout-padding и

отображение: встроенный блок;

для ваших абзацев (присвойте им уникальный идентификатор)

#wrapper {
  background-color: yellow;
  text-align: center;
}
#yourdiv {
  background-color: green;
  display: inline-block;
}

<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>