Html 如何在 CSS 中向上推文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11497663/
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 push up text in CSS?
提问by u283863
Demo: http://jsfiddle.net/DerekL/gNkKx/
演示：http: //jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a divby 50%, and I tried
我试图将文本推高div50%，我试过了
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
但它不起作用。
padding-top: -50px;
This does not work too. Any work-around?
这也行不通。任何解决方法？
回答by sachleen
line-height:0px;pushes it up some, but I don't know how much and it's apparently not 50px as you want.
line-height:0px;将其推高一些，但我不知道有多少，而且显然不是您想要的 50 像素。
You can wrap the element in another container and position it like so:
您可以将元素包装在另一个容器中并像这样放置它：
HTML
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
CSS（仅显示对样式的修改）
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
回答by Joshua
IF you are trying to center the text within the boxes, try the following:
如果您尝试将文本框内的文本居中，请尝试以下操作：
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}?
回答by Wynn
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
尝试使用 inline-block 提升文本。使用边框查看您所在的位置。通过这样做，您可以看到 margin-top 可以调整的位置以及它的大小。
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>
