Question

我使用以下代码为自己创建了一个箭头，

.arrow-divider{
    height:12px;
    width:12px;
    transform:rotate(-45deg);
    border-right:2px solid white;
    border-bottom:2px solid white;
}

每当我尝试使用margin:0 auto将其居中时，它就不会居中，因为我基本上只想让盒子右侧的一半居中，但它将整个盒子居中，我该如何解决这个问题呢？ / p>

我目前停留在以下代码

<div class="box">

  <div class="center-divider"> </div>

  <div class="arrow-wrapper">
   <div class="arrow-divider"></div>  
  </div>

</div>

.box{
  position:relative;
  background:orange;
  width:100%;
  height:50px;
  text-align:center;
  line-height:50px;
}

.arrow-wrapper{
  display:inline-block;
}

.center-divider{
  position:absolute;
  width:6px;height:100%;
  background:red;
  left:0;right:0;
  margin:auto;
}
.arrow-divider{
  height:12px;
  width:12px;
  transform:rotate(-45deg);
  border-right:2px solid black;
  border-bottom:2px solid black;
}

我收录了以下演示：JSFiddle

最后一句话，我不打算使用Flexbox，而是align-items和justify-content功能。

编辑：为什么选择downvote？

Answer 1

由于箭头分隔线的固定宽度/高度为12px ...为什么不减去它的一半：margin-left：-6px？

.arrow-divider{
  height:12px;
  width:12px;
  margin-left:-6px;
  transform:rotate(-45deg);
  border-right:2px solid black;
  border-bottom:2px solid black;
}

Here is the updated fiddle.

Answer 2

这是你想要实现的目标吗？

https://jsfiddle.net/5aex395k/4/

我已将这两条规则添加到.arrow-wrapper：

position: absolute;
right: 25%;

您的标题有固定的高度，因此您可以垂直居中箭头，只需添加top属性即可。

居中CSS箭头

2 个答案: