1

テキストを水平方向と垂直方向に揃えようとしています。横軸を使用して、次のように作成しました。

text-align: center;

そして、それは完璧に機能しました。しかし、テキストも縦軸の中央に配置したいのです。私は多くの解決策を読みましたが、誰もが異なる解決策を持っていて、少し混乱しています...

http://jsfiddle.net/QLPTD/1/

ありがとう！

4

5 に答える 5

2

CSSにはvertical-alignプロパティがありますが、それを使用するのは少し難しい場合があります。

詳細については、このページを参照してください。

プロパティを持つ外部divがありdisplay: table;、内部テーブルはdisplay: table-cell;です。その後vertical-align: middle;、内部divで実行できます。すべてのスタイルが外側のdivに適用されます。

HTML

<div id="outer">
    <div id="menu_secciones" >
            Hello!
    </div>
</div>​

CSS

#outer {
    display: table;
    background-color: #dddddd;
    position: absolute;
    left: 0;
    height: 50%;
    width: 100%;
    top: 10%;
}
#menu_secciones
{
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

デモ

于 2012-06-21T16:06:09.543 に答える
2

テキストを垂直方向に揃える場合は、同じ行の高さと高さを使用する必要があります。

http://jsfiddle.net/QLPTD/7/

于 2012-06-21T16:06:44.963 に答える
1

さて、あなたができることの1つは

line-height: 25px;

高さを指定しませんが、高さは自動的に設定されます。あなたはこれを試すことができます、それは私にとってほとんどの場合うまくいきます。

于 2012-06-21T16:03:03.320 に答える
0

パディングを有利に使用することを検討できます：http：//jsfiddle.net/QLPTD/15/

パディングトップとパディングボトムが同じであり、それに応じて表示と高さが設定されている限り、テキストは垂直方向の中央に表示されます。

于 2012-06-21T16:06:10.107 に答える
0

行の高さは、テキストを 1 行だけにする場合にのみ有効なソリューションです。sachleenが言及した方法も、実行可能な別のオプションです。あなたがそれを行うことができる別の方法は、絶対配置を使用することです.例えば....

<div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa nisi, pharetra elementum felis. Donec iaculis eros eu sapien pharetra tempor</p>
</div>


<style type="text/css">

  div {
    width:300px;
    height:300px;
    border:1px solid red;
}

p {
   display:block;
   width:300px;
   border:1px solid black;
   position:absolute;
   top:28%;
   text-align:center;
}

</style>

上位 % は、コンテンツによって異なります。

http://jsfiddle.net/krishollenbeck/gHXf7/

于 2012-06-21T18:42:09.530 に答える