4


1 line-height 40px を使用したこの最初のコンテンツには、以下のようなコンテンツが必要です

ここに画像の説明を入力 2番目のものでは、line-height 120pxを使用しました

これは、コンテンツが変化するにつれて、行の高さを変更する必要があることを意味します クラスを変更せずに、固定次元の div でこのタイプのセンタリングを作成する方法はありますか

Javascriptなしでこれを行うことはできますか? 高さを 120px として使用すると、このような div が取得されます (これは必要ありません)。 ここに画像の説明を入力

divのスタイルは

<style>
 .rectangle {
        postion:absolute;
    box-shadow: 10px #333;
    border-radius: 23px;
    border-top-right-radius: 0;
    border:6px solid;
    block:inline;
    line-height: 123.6px;
    width:200px;
    background-color: #444;
    float: left;
    margin: 5px;
    text-align: center;
    color:white;
   font-weight:900;

    text-decoration:none;
}
</style>
4

4 に答える 4

2

垂直方向のセンタリングはトリッキーです。CSS トリックスの Chris Coyier には、これに関する素晴らしい記事があります - http://css-tricks.com/centering-in-the-unknown/

私の個人的な好みはゴースト疑似要素ですが、これは IE8+ でしか実行できないため、レガシー IE サポートが必要な場合は、他の例をいくつか見る必要があるかもしれません。

これが実用的なフィドルです - http://jsfiddle.net/tommarshall/eGJQC/3/

于 2012-09-06T11:50:55.197 に答える
1

.rectangle 要素を表として表示し、内部のテキスト段落を表のセルとして表示します。次に、段落を簡単に垂直方向に配置できます。

これが実際の例です：http://jsfiddle.net/ktzUn/

于 2012-09-06T12:00:14.180 に答える
0

次の css は、高さと div のコンテンツが変化しても正常に動作します 

.rectangle 
      {
        height:auto;
        postion:absolute;
        box-shadow: 10px #333;
        border-radius: 23px;
        border-top-right-radius: 0;
        border:6px solid;
        block:inline;
        width:200px;
        background-color: #444;
        float: left; padding:20px 10px 20px 10px;
        margin: 5px;
        text-align: center;
        color:white;
        font-weight:900;
        text-decoration:none;
    }
于 2012-09-06T12:00:34.853 に答える