私はCSS忍者ではありません。あなたの天才的な解決策がなければ、次の問題に対するサーバー側の解決策を練る必要があります。
- イメージがあります。画像のサイズは可変です。250x380 や 640x480 など何でもかまいません。
- 画像の中央にテキストを配置する必要があります。水平方向と垂直方向に整列する必要があります。
- HTML+CSS ソリューションが必要です... クライアント側で機能するものは何でも構いません。
HTML と CSS のみを使用して、求められていることを実行する方法を次に示します。それは私の他のソリューションよりもはるかに汚いですが、とにかくクールです。
div
withの中に画像を入れますposition: relative
div
内側に入れますtable
div
div
を使用して、画像の下にある をラッパー全体に伸ばしますposition: absolute
div
テーブルの内側を表示し、inline-block
必要に応じてスタイルを設定します例を次に示します: http://jsfiddle.net/Codemonkey/a52qx/1/
ブラウザの互換性については保証できません。Internet Explorer はうまくいくと思いますが、私は Ubuntu マシンを使用しているため、それをテストすることはできません。
HTML、CSS、および JavaScript を使用して、求めていることを行う 1 つの方法を次に示します。
alt
プロパティdiv
要素ラベルを作成して画像の上に配置する関数を作成する例を次に示します: http://jsfiddle.net/Codemonkey/YnMfM/2/
私の例では JavaScript が必要ですが、必須ではない jQuery ライブラリを使用しています。純粋な JavaScript またはその他のライブラリを使用できます
Codemonkey/Hubro の HTML/CSS のみのソリューションは機能しますが、実際にはテーブルを使用する必要はありません。display:table
関連する div をおよびに設定するだけですdisplay:table-cell
。
テーブルのない彼の例は次のとおりです。