平行四边形内的水平居中对象

Question

我当前具有使用div和css属性clip-path创建的平行四边形。此形状也以动态宽度放置在屏幕的停止位置和底部。我正在尝试找出如何水平（而非垂直）居中放置内容。

我的问题是，我尝试居中的任何文本似乎都居中于矩形，而不是我创建的平行四边形。

到目前为止，我尝试使用左右填充，基于百分比的边距以及将div中内容的剪切路径都无效。

我已将a codepen附加到目前的位置。任何帮助将不胜感激。

Answer 1

您需要添加

text-algin-center;

给您。sidebar-callout-padding和

display：inline-block;

给您的段落（给它们一个唯一的ID）

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

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