1

私はCSS忍者ではありません。あなたの天才的な解決策がなければ、次の問題に対するサーバー側の解決策を練る必要があります。

  • イメージがあります。画像のサイズは可変です。250x380 や 640x480 など何でもかまいません。
  • 画像の中央にテキストを配置する必要があります。水平方向と垂直方向に整列する必要があります。
  • HTML+CSS ソリューションが必要です... クライアント側で機能するものは何でも構いません。
4

3 に答える 3

3

HTML と CSS のみを使用して、求められていることを実行する方法を次に示します。それは私の他のソリューションよりもはるかに汚いですが、とにかくクールです。

  1. divwithの中に画像を入れますposition: relative
  2. 画像と同じdivのdiv内側に入れますtablediv
  3. divを使用して、画像の下にある をラッパー全体に伸ばしますposition: absolute
  4. 表の幅と高さを 100% に設定し、テキストの配置と垂直方向の配置を中央に設定します。
  5. divテーブルの内側を表示し、inline-block必要に応じてスタイルを設定します

例を次に示します: http://jsfiddle.net/Codemonkey/a52qx/1/

ブラウザの互換性については保証できません。Internet Explorer はうまくいくと思いますが、私は Ubuntu マシンを使用しているため、それをテストすることはできません。

于 2012-06-15T14:29:43.287 に答える
3

HTML、CSS、および JavaScript を使用して、求めていることを行う 1 つの方法を次に示します。

  1. 必要なラベルを画像のプロパティに入れます。たとえば、altプロパティ
  2. div要素ラベルを作成して画像の上に配置する関数を作成する
  3. その上にラベルを付けたいすべての画像でその関数を実行します

例を次に示します: http://jsfiddle.net/Codemonkey/YnMfM/2/

私の例では JavaScript が必要ですが、必須ではない jQuery ライブラリを使用しています。純粋な JavaScript またはその他のライブラリを使用できます

于 2012-06-15T14:05:51.927 に答える
0

Codemonkey/Hubro の HTML/CSS のみのソリューションは機能しますが、実際にはテーブルを使用する必要はありません。display:table関連する div をおよびに設定するだけですdisplay:table-cell

テーブルのない彼の例は次のとおりです。

https://jsfiddle.net/aphidesign/cwosvp9b/

于 2015-03-12T08:21:59.603 に答える