如何在CSS中向上移动文本？

Question

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

我正在尝试将一个 div 中的文本向上移动50％，并且我尝试过：

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

但是它没有起作用。

padding-top: -50px;

这也不起作用。有什么解决办法吗？

- Derek 朕會功夫

---

line-height:0px; 会将其向上推一些。 - sachleen

@sachleen - 它确实有影响，但它不是向上50像素... - Derek 朕會功夫

Answer 1

line-height:0px; 会让其上移，但我不知道具体上移多少，显然不是你想要的50px。

你可以将该元素放在另一个容器中，并这样定位：

HTML

<div class="container">
  <div class="block">龍</div>
</div>

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

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

演示

- sachleen

---

将另一个 div 包装起来确实可以解决它，但这也会在 HTML 中创建更多的混乱。如果没有其他方法，我会选择使用 line-height。 - Derek 朕會功夫

不需要外部块和绝对定位，更简单的解决方案是使用单个相对元素，例如：hello <span style="position:relative; top:-5px;">there</span>! - ingredient_15939

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

- Joshua

---

我认为他想把它向上推，以便字符的上半部分不可见。第一个框显示了如何使底部消失，但他无法弄清如何在第二个框中将字符向上推。 - sachleen

Sachleen是正确的。我正在制作类似于这个的东西：http://jsfiddle.net/DerekL/YVHBy/ - Derek 朕會功夫

@Derek 理解了。感谢您的跟进。您最初的问题不太清楚，我做了一些假设 :) - Joshua

Answer 3

一个稍微更干净的解决方案：（基于Sachleen的）

HTML：

<div class="move-me-up">
    <p>Some text</p>
</div>

CSS：

.move-me-up {
    position: relative; 
    top: -50px;
}

这将使文本在屏幕上向上移动50像素，而只需要一个div！

- Jojobinx

Answer 4

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

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

- Wynn