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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5587458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:50:59  来源:igfitidea点击:

How to move an element down a litte bit in html

htmlcss

提问by novicePrgrmr

That sounds weird I know, but I am having trouble getting a piece of text to move down a tiny bit so it's centered on the tab it's on.

我知道这听起来很奇怪,但是我无法让一段文本向下移动一点,因此它位于它所在的选项卡上。

here's what it looks like:

这是它的样子:

enter image description here

在此处输入图片说明

I want buy to be centered vertically.

我想购买垂直居中。

Here is the html:

这是html:

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

采纳答案by My Head Hurts

You can set the line height on the text, for example within the active class:

您可以设置文本的行高,例如在活动类中:

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

回答by poseso

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

Play with it

玩它

回答by bradley.ayers

A simple way is to set line-heightto the height of the element.

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

回答by Syed Tayyab Abbas

You can use the top margin-topand adjust the text or you could also use padding-topboth would have similar visual effect in your case but actually both behave a bit differently.

您可以使用 top margin-top并调整文本,或者您也可以使用padding-top两者都会在您的情况下具有相似的视觉效果,但实际上两者的行为略有不同。

回答by Adrian Wiik

You can use vertical-alignto move items vertically.

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

Example:

例子:

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

This will move the span containing the word 'example' downwards 20 pixels compared to the rest of the text.

与文本的其余部分相比,这会将包含单词“example”的跨度向下移动 20 个像素。

The intended use for this property is to align elements of different height (e.g. images with different sizes) along a set line. vertical-align: topwill for instance align all images on a line with the top of each image aligning with each other. vertical-align: middlewill align all images so that the middle of the images align with each other, regardless of the height of each image.

此属性的预期用途是沿设定的线对齐不同高度的元素(例如具有不同大小的图像)。vertical-align: top例如,将所有图像对齐在一条线上,每个图像的顶部彼此对齐。vertical-align: middle将对齐所有图像,使图像的中间相互对齐,无论每个图像的高度如何。

You can see visual examples in this CodePenby Chris Coyier.

您可以在Chris Coyier 的 CodePen 中查看可视化示例。

Hope that helps!

希望有帮助!

回答by halfdan

Try it like this:

像这样尝试:

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

回答by Kon

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

回答by Heavy Dizzay

It's simple, just use:

很简单,只要使用:

<br />