如何将文本相对于三角形div对齐？

Question

我不确定堆栈溢出是否存在此类问题。

我的问题：

如果您看到上面的图片，我的（...）在响应时未对齐，但我想将其保持在三角形的中间。

HTML：

<div class="arrow_box">
    <div class="container">
        <div class="row">
            <div class="Row14Text">
                <h2>
                    <strong>PHASE 1:</strong>
                </h2>
                <a href="#">...</a>
            </div>
        </div>
    </div>
</div>

我的CSS代码：

.arrow_box .container{
    width: 100%;
}

.arrow_box { 
    position: relative; 
    background: #616161; 
    width:100%;
    height:120px;
    cursor:pointer;
    color:#fff; 
    margin-bottom:5px;
}

.arrow_box:hover{
    background-color:red;
}

.arrow_box a,.arrow_box a:hover{
    color:#fff;
    background-color:transparent;
}

.arrow_box:nth-child(n+2):before{
    content:'';
    position: absolute;
    top: 00%;
    left: 52%;
    margin-left: -40px;
    border-top: solid 23px #fff;
    border-left: solid 26px transparent;
    border-right: solid 26px transparent;
    overflow:visible;
}

.arrow_box:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 52%;
    margin-left: -40px;
    border-top: solid 23px #616161;
    border-left: solid 26px transparent;
    border-right: solid 26px transparent;
    z-index:1000;
}

.arrow_box:hover:after {
    border-top: solid 23px #f00;
}

所以，朋友们，上面描述的是我的css和html代码。请帮我解决这个错位问题

而且，我想知道是否存在对齐问题或css问题。

我在这里使用 Bootstrap 。

请朋友们，我不能用宽度：100％到容器，我有一些限制。 我的父容器div为arrow_box：

enter code here

我不能使用左50％，它有一些布局问题。

Answer 1

您需要正确地对准伪元素。你的价值观有点偏。

调整后的CSS属性

/*left: 52%;*/
left: 50%;
/*margin-left: -40px;*/
transform:translateX(-50%); /* unprefixed version */

JSfiddle Demo

Answer 2

更新以下属性。

.arrow_box:nth-child(n+2):before {
    left: 45%;
    //margin-left: 40px; /* Remove this */
}

.arrow_box:after{
    left: 45%;
    //margin-left: 40px; /* Remove this */
}

Answer 3

SOLUTION

<div class="container">

  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 1:</h2>
      <a href="#">...</a>
    </div>
  </div>

  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 2:</h2>
      <a href="#">...</a>
    </div>
  </div>  

  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 3:</h2>
      <a href="#">...</a>
    </div>
  </div>  

  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 4:</h2>
      <a href="#">...</a>
    </div>
  </div>

  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 5:</h2>
      <a href="#">...</a>
    </div>
  </div>      

</div>

.container{
  width: 100%;
}

.arrow_box { 
  position: relative; 
  background: #616161; 
  width:100%;
  height:120px;
  cursor:pointer;   
  margin-bottom:5px;
  text-align: center;
  padding-top: 20px;
}

.arrow_box * {
  color:#fff;
  font-family: sans-serif;
}

.arrow_box:hover {
  background-color:#919191;
}

.arrow_box:hover:after {
  border-top: solid 23px #919191;
}

.arrow_box a {
  text-decoration: none;
  font-size: 30px;
}

.arrow_box:after {
  content:'';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: solid 26px transparent;
  border-top: solid 23px #616161;
  z-index: 2;
}

.arrow_box:nth-child(n+2):before{
  content:'';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: solid 26px transparent;
  border-top: solid 24px #fff;
  overflow:visible;
  z-index: 1;
}

.arrow_box:last-child:after {
  display: none;
}