如何在html中将元素向下移动一点

Question

我知道这听起来很奇怪，但是我很难让一段文字向下移动一点点，所以它集中在它所在的标签上。

这就是它的样子：

我希望买入垂直居中。

这是html：

<div class="row-2">
     <ul>
         <li><a href="index.html" class="active">Buy</a></li>
     </ul>
</div>

Answer 1

您可以在文本上设置行高，例如在活动类中：

.active {
    ...
    line-height: 2em;
    ....
}

Answer 2

一种简单的方法是将line-height设置为元素的高度。

Answer 3

<div class="row-2">
 <ul>
     <li><a href="index.html" class="active"><p style="margin-top: 10px;">Buy</p></a></li>
 </ul>

玩它

Answer 4

您可以使用顶部 margin-top 并调整文本，或者您也可以使用 padding-top 两者在您的情况下都具有类似的视觉效果但实际上两者都表现出来有点不同。

Answer 5

您可以使用vertical-align垂直移动项目。

示例：

<div>This is an <span style="vertical-align: -20px;">example</span></div>

与文本的其余部分相比，这会将包含“示例”一词的范围向下移动20个像素。

此属性的预期用途是沿设定线对齐不同高度的元素（例如，具有不同大小的图像）。 vertical-align: top例如将一行中的所有图像对齐，每个图像的顶部彼此对齐。 vertical-align: middle将对齐所有图像，以便图像的中间彼此对齐，而与每个图像的高度无关。

您可以在Chris Coyier的CodePen中看到视觉示例。

希望有帮助！

Answer 6

试试这样：

.row-2 ul li {
    margin-top: 15px;
}

Answer 7

<style>
.row-2 UL LI A
{
  margin-top: 10px;  /* or whatever amount you need it to move down */
}
</style>

Answer 8

这很简单，只需使用：

<br />