Question

我需要将div中间的红色三角形与文本对齐，但是我尝试了几次失败。

http://jsfiddle.net/aq9Laaew/207191/

 <div class="container">
  <div class="row">
    <div class="col-2 opt ">teste
    testetestete
    uaoijpajpa
    ]jpiajpiajpo
    piajpajpoçajp

    dada
    dadad
    hjaojpaj
    kpakák
    pjapp--´q
    oiaijaçlma
    kjpoakpa-k
    </div>
      <div class="col wrp p-0">
        <div class="tri"></div>
      </div> 
  </div>
</div>

Css

.opt {
      border: 1px solid red;
      color: red;
      display: block;
    }
    .wrp {
      padding-top: 50%;
    }
    .tri {
      width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-left: 12px solid red;
        border-bottom: 15px solid transparent;
    }

Answer 1

有一种简单的方法，只需将 margin：auto 0; 添加到您的 .wrp 类中（这将根据您的内容从上至下自动获取边距）并删除顶部填充：50％。由于您在.col类上添加了边框，因此如果您希望可以删除边框，它将显示边框。这是代码：

    .wrp {
      margin: auto 0;
      border: 0;
    }

立即尝试：https://jsfiddle.net/aq9Laaew/207289/

Answer 2

您可以将以下属性添加到类tri中：

top: 50%;
position: relative;
transform: translateY(-50%);

position: relative允许其他可能使元素偏离其正常位置的属性

top: 50%会将三角形的垂直位置从其容器设置为50％。

transform: translateY(-50%)将三角形上移自己高度的一半

Answer 3

立即尝试

http://jsfiddle.net/aq9Laaew/207230/

我已添加

  position: absolute;
  top:50%;
  transform:translateY(-50%);

转到.tri类

div的垂直对齐

3 个答案: