Divのボトムまでのテキスト

Question

divのコンテンツテキストを下に取得する方法はありますか？ ここで私は例を用意しました。

http://jsfiddle.net/JGuP7/

これはサンプルの階層です：

<div class="button">Button Label</div> 

私は、追加のスパンを追加したり、階層を変更せずに結果を達成しようとしています。

Answer 1

3つの可能な解決策、それぞれが独自の注意点がありますが。

jsFiddle demo

第1の解決策はDIVの下でテキストを整列させるline-height: 220px; vertical-align: bottom;に依存しています。 2番目の解決策は、テキストをDIVの下にプッシュする擬似要素を作成します（これは追加のマークアップを必要としません）。両方の溶液は、IE7以前に失敗し、そして場合の両方に問題があります：フォントサイズが

を変更

• テキストが含まれている要素のサイズは、

を変更

第二行に折り返さ

第3の解決策は、display: box;プロパティに依存します。これは段階的に廃止されるCSSプロパティです（詳細はQuick Hits With the Flexible Box Modelを参照）。このソリューションは、v4以降のChrome、v2以降のFirefox、IE10ベータ版でのみサポートされています。しかし、新しいFlexbox標準が標準化されていますが、ブラウザのサポートは最小限です。この解決策は効果的に使用するには「あまりにも新しい」と考えられる可能性があります（html5please.com/#flexbox）。

一般的に言えば、テキストの周囲に新しいラッピング要素があると考えてください。position: absolute; bottom: 0;は、要素を親要素の一番下に置くことができます。これは、子要素を上向きに拡大する利点があります。これは、フォントサイズまたはテキストの長さが増え、親コンテナのサイズには依存しません。あなたの配置がミッションクリティカルなレイアウトに応じて、この新しい要素をJavascriptを使って追加することができます。これはあなたの疑問を考えれば理想的ではないかもしれませんが、ブラウザのサポートは上記のCSSの解決には理想的ではありません:-p

Answer 2

あなたはコンテナにposition:relativeを使用して、コンテンツに

position:absolute; 
bottom:0; 

を使用する場合は、所望の結果を達成することができます。

あなたのCSSは次のようになります

：

.button 
    { 
     display: block; 
     background-color: darkred; 
     color: white; 
     width: 120px; 
     height: 120px; 
     text-align: center; 
     position: relative; 
    } 
    .bottomContent 
    { 
     position:absolute; 
     bottom: 0; 
    } 

とあなたのHTML：

<div class="button"><p class="bottomContent">Button Label</p></div> 

Source

Answer 3

これを行うための別の方法は、 "表示：テーブルセル" を用いてだろうと "vertical-align：bottom"があります。

http://jsfiddle.net/JGuP7/1/

.button { 
    display: table-cell; 
    background-color: darkred; 
    color: white; 
    width: 120px; 
    height: 120px; 
    text-align: center; 
    vertical-align: bottom; 
}