- 締切済み
CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。
CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。 スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、 どのように記述したら良いのかわかりません。 下記のようにテーブルを使えば簡単に出来るのですが、 これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか？ ちなみに左側画像の縦サイズは変わります。 よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } --> </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------
- みんなの回答 （4）
- 専門家の回答
みんなの回答
強制的にしてみました。何か違うような気もしますが・・・。 <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding:6px 8px 6px 8px; background-color:#008837; } #table { position:absolute; top:変わりますの半分px; width:355px; } --> </style> </head> <body> <div id="waku"> <img src="hoge.gif" width="80" height="変わります"> <div id="table"> あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお </div> </div> </body> </html>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>文が長くなって改行になると画像の下へ潜るのでNG #2のCSSでimgでinlineを使われていることから、 vertical-alignがinline要素を縦に（ベースラインに）中央揃えすることは、理解されていると思いますが、 inline要素が並んでいるものが、改行されるということは、「２行目になっている」ということです。 この２行目が１行目の下に潜るといって文句をいうのは、おかしいです。 つまり、テキスト部分をブロック扱いしていることになります。 テキスト部分をブロック扱いするなら、インラインの指定であるvertical-alignが無効になるのは当たり前です。 ＣＳＳでブロック要素を縦に中央揃えする方法は、なかったような気がしますので、元通りtableを使われるのがよろしいかと思います。 （ブロック要素を並べて、ブロック要素の上下にマージンをとる方法もあるかもしれませんが、高さが変わる場合なかなかうまくいかないと思います)
補足
>この２行目が１行目の下に潜るといって文句をいうのは、おかしいです。 >テキスト部分をブロック扱いするなら、インラインの指定であるvertical-alignが無効になるのは当たり前です。 そうですね。下記の2つは、質問する前からうまくいかないとわかっていました。 求めている答えはこれじゃない、とわかっていただくために例を書きました。 やはりテーブルを使うしかないのでしょうか？ CSSは難しいです。
- mameusa
- ベストアンサー率50% (87/174)
回り込みがダメなら、 IMG配置をfloat指定するしか思いつきませんが、 試してみましたか？ この場合だと float:left； ですかね。 段組できるはずです。
補足
floatを使うとこんなかんじでしょうか。 「vertical-align:middle;」が無視されてしまいます…。 「回り込ませて、真ん中揃え」って文法的にも矛盾しているような気がします。 ------------------------------------------------------------------- <html> <head> <title>CSS3</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } img { display: inline; float: left; vertical-align:middle; } .clear { clear: both; } --> </style> </head> <body> <div id="waku"> <img src="hoge.gif" width="80" height="変わります">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお <br class="clear"> </div> </body> </html> -------------------------------------------------------------------
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#waku { … vertical-align:middle; }
補足
もう少し詳細を書いていただけないでしょうか…。 もしかして下記のような事でしょうか。 imgへの「vertical-align:middle;」はすでに試しましたが、これだと文が長くなって改行になると画像の下へ潜るのでNGです。 ------------------------------------------------------------------- <html> <head> <title>CSS2</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } img { vertical-align:middle; } --> </style> </head> <body> <div id="waku"> <img src="hoge.gif" width="80" height="変わります">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div> </div> </body> </html> -------------------------------------------------------------------
お礼
ご回答、ありがとうございます。 テンプレートとして使いたかったので、画像の高さは成りにしたかったのです。 ですので「top:変わりますの半分px;」というのはちょっと難しいです。 ですがheightを変数にしてやればうまくいかもしれません。 一度試してみます。 ありがとうございました。