在 div 中居中 css 人字形

Question

我基于 this chevron off some code from here，并将其更改为将其用作轮播中的导航。但是，我正在努力将其置于灰色区域的中心。最好水平居中，边缘有一点填充。

我试着用另一个 div 包裹人字形，但没有成功。

.chevron {
  position: absolute;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 44px;
  width: 109px;
  top: 242px;
  background: #545454;
}
.chevron:hover:before,
.chevron:hover:after {
  background: blue;
}
.chevron {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.chevron:before,
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  height: 17%;
  background: red;
}
.chevron:before {
  left: 0;
  width: 51%;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.chevron:after {
  right: 0;
  width: 50%;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

<div class="chevron"></div>

Answer 1

我相信你很困惑，因为人字形旋转了 90 度。如果你去掉那个旋转，就更容易理解人字形元素的位置了：

.chevron {
    position:relative;
    height: 44px;
    width: 109px;
    background: #545454;
}

.chevron:before, .chevron:after {
    content: '';
    position: absolute;
    top: 40%;
    height: 17%;
    background: red;
}

.chevron:before {
    left: 5%;
    width: 46%;
    transform: skew(0deg, 6deg);
}

.chevron:after {
    right: 5%;
    width: 45%;
    transform: skew(0deg, -6deg);
}

<div class="chevron"></div>

请注意，为了这个问题，我还删除了转换属性的供应商前缀。

Answer 2

这个怎么样： http://jsfiddle.net/8c2r3m5d/1/

我在 :before 和 :after 添加了：

top:40%;

应该是顶部，因为整个人字形是旋转的，这就是为什么更改顶部值会使它向左和向右移动的原因

Answer 3

只需调整top偏移量如下：

.chevron:before,.chevron:after {
    top: 42%;
    height: 17%;
}

顶部偏移值为 50% 减去高度的一半 (8%)。您实际上是将人字形垂直居中，因为您已将它旋转 90 度，因此看起来它需要水平居中。

.chevron {
  position: absolute;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 44px;
  width: 109px;
  top: 50px;
  background: #545454;
}
.chevron:hover:before,
.chevron:hover:after {
  background: blue;
}
.chevron {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.chevron:before,.chevron:after {
  content: '';
  position: absolute;
  top: 42%;
  height: 17%;
  background: red;
}
.chevron:before {
  left: 0;
  width: 51%;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.chevron:after {
  right: 0;
  width: 50%;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

<div class="chevron"></div>

在 div 中居中 css 人字形

Center css chevron in div

html

css

css-shapes