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
How to move an element down a litte bit in html
提问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:
这是它的样子:
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-height
to 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-align
to 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: top
will for instance align all images on a line with the top of each image aligning with each other. vertical-align: middle
will 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 />