Question

嘿，我在CSS中创建了一个三角形，如下所示：

＆＃13;

.triangleup {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
}

＆＃13;

<h1>Here is a triangle<i class="triangleup"></i></h1>

＆＃13;

我想更改三角形的 y 位置并将其向上移动，使三角形的顶部与文本的顶部对齐。我该怎么做呢？

Answer 1

试试这个：

.triangleup {
  vertical-align: top;<----------Added
  //More code.........
}

.triangleup {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
  vertical-align: top;
}

<h1>Here is a triangle<i class="triangleup"></i></h1>

Answer 2

有两种方法可以做到这一点，即在顶部对齐三角形，使其与剩余文本一致，

1 - 将.triangleup的位置更改为position:relative并将top改为negative value，

＆＃13;

.triangleup {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
  position:relative;  /*Add this*/
  top:-22px;  /*Add this*/
}

＆＃13;

<h1>Here is a triangle<i class="triangleup"></i></h1>

＆＃13;

第二 - 通过将.triangleup的位置更改为position:absolute和top:0，您甚至需要将h1的位置更改为relative。

position：absolute - 从正常文档中删除元素流;没有为页面布局中的元素创建空间。代替，它相对于其最近的祖先（如果有的话）定位; 否则，它相对于初始包含块放置。

＆＃13;

h1{
  position:relative;
}
.triangleup {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
  position:absolute;
  top:0;
}

＆＃13;

<h1>Here is a triangle<i class="triangleup"></i></h1>

＆＃13;

Answer 3

您可以尝试在三角形的底部放置一些边距

.triangleup {
    margin-bottom: 10px;
}

Answer 4

保证金左：50像素; 边距：50像素; 这用于设置三角形左上角点的位置。

Answer 5

您可以将其与应用位置对齐。所以代码将是：

.triangleup {
    border-color: transparent transparent #58be23;
    border-style: solid;
    border-width: 0 7.5px 10px;
    display: inline-block;
    height: 0;
    position: relative;
    top: -3px;
    width: 0;
}

https://jsfiddle.net/rijokpaul/hjx7q4kj/2/

Answer 6

.triangleup {
  position:absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
  top:0px;
  }
  h1{
    background-color:blue;
    position:relative;
  }

<h1>Here is a triangle<i class="triangleup"></i></h1>

使 h1 元素位置：相对和 traingleup 类位置：绝对。现在它有效。希望它有所帮助。

Answer 7

  margin-bottom:10px;

css中的此代码将解决问题

Answer 8

此处的其他答案为您提供了一些可能与您给出的具体示例相关的可能性，但可能需要根据您的实际字体大小和字体系列调整一些数字。

一个更抽象的解决方案，无论字体是否使用专门用于此目的的CSS属性，都会为您提供大致正确的对齐方式：vertical-align: text-top。

只需设置该属性即可自动将三角形底部对齐到文本顶部。

如果要对齐三角形的顶部，则可以执行其他人建议的操作，并为垂直对齐添加相对定位。由于您的三角形高度为10像素，因此您可以使用top: 10px（与position: relative结合使用）将三角形向下推，使其顶部与文本顶部对齐。

最终样式如下所示：

.triangleup {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7.5px 10px 7.5px;
  border-color: transparent transparent #58BE23 transparent;
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  top: 10px;
}

如果你走这条路线或者其他人提出的路线之一，是否让三角形足够靠近你想要它的位置将是决定因素。我认为这种方法更灵活，但代价是精确度稍低。

向上三角形，调整CSS中的y位置

8 个答案: