- 締切済み
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> -------------------------------------------------------------------
- Java-Java
- お礼率48% (81/166)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （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> -------------------------------------------------------------------
関連するQ&A
- スタイルシートでの中央揃え
<html> <head> <title>文書のタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{text-align: center;} </style> </head> <body> <table> <tr> <td> テーブルの内容 </td> </tr> <table> テーブル外の内容 </body> </html> のように、スタイルシートで、 body{text-align: center;} を指定したのですが、IE6ではtableが中央揃えされましたが、NN7.1やFirefox 1.5.0.7ではtableが中央揃えされませんでした。 centerタグを使えば問題ありませんでしたが、非推奨なのであまり使いたくありません。 スタイルシートを用いてIE6と同様にNNやFirefoxでtableを中央揃えするようにするにはどうすればいいでしょうか。
- ベストアンサー
- HTML
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト（waku）と、テーブルの幅を可変（パーセント表示）にしないと、画像の伸縮は難しいのでしょうか。 ＊＊＊＊ HTML部分（CSSは外部） ＊＊＊＊＊ <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> ＊＊＊＊ style.css(CSS部分) ＊＊＊＊＊ #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- 画像上に文字を表示するとiPhoneで位置がずれる
ホームページで時間に応じて2行のテキストを時計画像の上に表示したいのですが 以下のCSSを使った方法ではPCやアンドロイドではズレないで表示されます。 ただし親のiPhoneを借りて見ると 何故か文字位置が下の方にずれてしまい画像から文字がはみ出してしまいます。 ブラウザは標準ではいってるやつ（Safari？）です。 <div style="position: relative;"> <img src="hoge.jpg" width=250 height=46> <div style="position:absolute; top:6px; left:20px;"> <table border=0 cellspacing=0 cellpadding=0> <tr><td>この文章は</td></tr> <tr><td>サンプルですよ</td></tr> </table> </div> </div> どうもiPhoneのSafariはフォントサイズを自動で調整する機能があるそうで それを解除するために以下のCSSを追加してみました。 -webkit-text-size-adjust: none; このCSSを追加するとフォントサイズは変えていなくても表示は小さくなり 位置ずれはマシにはなりました。 が、それでも行間が大きいためか画像からははみ出しています。 テーブル部分を2個に分離してそれぞれ位置を修正すれば、と思ったのですが それだとSafari以外は詰まって表示されてしまいますよね・・・シクシク。 他のブラウザならともかくiPhoneの標準ブラウザなので何とか直したいです。 これを修正できる方法をご存知の方はおられますでしょうか？ 画像の上に文字を表示できるのでしたら、 上記のCSSとはまったく別のものになっても構いません。 よろしくおねがいします。
- ベストアンサー
- CSS
- テーブルの中の文字を縦に表示する方法
テーブルの中の文字を縦に表示する方法はありますか？ 今はわからないので、<br>で無理やり改行しています。 もっとスマートな方法があれば教えてください。 <style type="text/css"> table { width: 50%; height: 20px; border: 2px #2b2b2b solid; } td { border: 2px #2b2b2b solid; } </style> <table> <tr> <td>よこ</td> <td>た<br>て</td> </tr> </table>
- 締切済み
- CSS
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSSでdiv内を下揃え
CSSでdiv内を下揃えは出来ないものでしょうか? テーブルを使った時の以下の表現をCSSで表現したいです。 <TABLE border="0" height="200"> <TR> <TD>ここは上から●pxに画像配置</TD> </TR> <TR> <TD valign="bottom">ここを下揃えで画像表示</TD> </TR> </TABLE> テーブルならすぐできるのですが… 下揃えの方法があれば教えてください。
- ベストアンサー
- CSS
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
- css:縦方向中央揃えについて
HP制作初心者です。 現在自分のHPを作成しようとしているのですが、メニュー部分テキストについて 縦方向中央揃えが上手くできません。。 以下ソースなんですが、アドバイスいただけないでしょうか？ 形としては、 blog profile portfolio が横並びで並ぶメニューを想定しています。 ◆html <div id="header"> <h1><img src="ロゴ画像" width="95" height="25" /></h1> <div id="gNav"> <ul> <li><a id="first" href="#">BLOG</a></li> <li><a id="second" href="#">PORTOFOLIO</a></li> <li><a id="third" href="#">PROFILE</a></li> </ul> </div> </div> ◆CSS #header h1 { width: 95px; height: 25px; margin:auto; } #gNav { width: 570px; height: 38px; margin: 0 auto; padding: 0; background-image: url(gNav背景.png); background-repeat: no-repeat; } #gNav li { text-align: center; float: left; } li #first { width: 105px; height:38px; background-image:url(#first背景.png); background-repeat:no-repeat; } ※#second,#thirdも#firstと同様です。 #gNav li a { vertical-align: middle; } 以上です。vertical-alignが効けば問題無いと思うのですが、 動作しません。display table-celとかも試しましたが、、、駄目です。 何か凄く根本的なところで間違っていると思うのですが、、、ご指摘頂けると 助かります。 よろしくお願い致します。
- ベストアンサー
- HTML
お礼
ご回答、ありがとうございます。 テンプレートとして使いたかったので、画像の高さは成りにしたかったのです。 ですので「top:変わりますの半分px;」というのはちょっと難しいです。 ですがheightを変数にしてやればうまくいかもしれません。 一度試してみます。 ありがとうございました。