html - CSSでテキストを押し上げる方法は?

Question

デモ: http://jsfiddle.net/DerekL/gNkKx/

divテキストを50%押し上げようとしています。

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