时间戳

首页 > 解决方案 > 在平行四边形内水平居中对象

html - 在平行四边形内水平居中对象

问题描述

div我目前有使用 a和 css 属性创建的平行四边形clip-path。此形状也以动态宽度固定在屏幕的停止点和底部。我试图弄清楚如何将内容水平（而不是垂直）居中。

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

到目前为止，我尝试使用左右填充、基于百分比的边距和内容的剪辑路径均div无济于事。

到目前为止，我已经附上了一个代码笔。任何帮助将不胜感激。

标签： htmlcssclip-path

解决方案

您需要添加

文本-​​algin-center;

到您的 .sidebar-callout-padding和

显示：内联块；

到你的段落（给他们一个唯一的 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>

推荐阅读