html - 如何在 CSS 中上推文本？

Question

演示：http: //jsfiddle.net/DerekL/gNkKx/

我试图将文本推高div50%，我试过了

padding-bottom: 50px; /*div is 100px high*/

但它不起作用。

padding-top: -50px;

这也不起作用。任何解决方法？

Answer 1

line-height:0px;把它推高一些，但我不知道多少，而且显然不是你想要的 50px。

您可以将元素包装在另一个容器中并像这样定位它：

HTML

<div class="container">
  <div class="block">龍&lt;/div>
</div>

CSS（仅显示您的样式的修改）

.container{
    position: relative;
}
.block {
  position: absolute;
  top: -50px;
}

演示

Answer 2

如果您尝试将文本置于框中的中心，请尝试以下操作：

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;
}​

Answer 3

尝试使用 inline-block 提升文本。使用边框查看您的位置。通过这样做，您可以看到margin-top 可以向上调整的位置以及它有多大。

<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
    <font style='color:green;'>today </font>
</div>