画像の横のテキストの配置

[新着] Webテンプレートを仮オープンしました



0   名前: BNCケーブル : 2005/12/04 05:36
画像の横に解説用のテキストを複数行入れて
縦位置が中心になるようにするにしたいのですが、どうしてもうまくいきません。
このサイトの解説にある、vertical-align: middle; をimgタグに
指定するやり方をやってみましたが、1行のときは中心に配置されるのですが
複数行になると上付きになってしまいます。
テーブルを使うと簡単にできたのですが、やはりテーブルを使うべきでしょうか?

良い方法ありましたら、ご教授のほうよろしくお願いします。

1   名前: 匿名希望 : 2005/12/04 05:36
IEでは無理っぽいね。てか分かりません。
http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi?mode=view&no=247
ここではテーブルはお勧めできないって書いてあるけど・・・・

2   名前: BNCケーブル : 2005/12/04 05:36
匿名希望さん、ありがとうございます。
仕方がないのでテーブルを使うことにしました。
色々試したのですが私には無理っぽいので・・・

3   名前: 夕凪 : 2005/12/04 05:36
画像のCSSに
float : right
を入れれば画像の右にテキストが

float : left
を入れれば画像の左にテキストが来ると思います

4   名前: 通りすがり : 2005/12/04 05:36
>>3
いや、それは質問の答えになってませんぞ?
BNCケーブルさんは文字を(縦方向で)中央揃えにしたい、と言ってるんでしょ。

5   名前: Pid : 2005/12/04 05:36
>>1
>ここではテーブルはお勧めできないって書いてあるけど

そうは書いていないと思いますよ。

要するに,『画像の横に解説用のテキスト』というのをBNCケーブルさんが「どうマークアップしているか」によって,最適な方法が違ってくるということです。もし表としてマークアップしているなら,それはそれで何の問題もありません。また,箇条書きや定義型リストとしてマークアップしている場合でも,(ちょっと複雑な CSS の書き方になりますが)やりようはあります。

ですからリンク先 >>1 の指摘は,至極まっとうなものだと私は思います。CSS は HTML の書き方に左右されますから,具体的な HTML ソース無しに CSS の書き方だけを問われても,正直答えようがありません (^^;)。

また,注意すべき点は,製作者がどう頑張っても,利用者の設定や環境次第では意図した表示にならないことが多々あるということです(ユーザスタイルシートで表を分解することだってできるのですから)。だからこそ,まず文書の構造(どんな文書要素で構成されているか)をマークアップしておくことが重要になるわけで,それをせずに最初から見栄えを基準にして HTML を書くことは無意味であり,危険ですらあるわけです。

※極論ですけどね (^^;)。

一覧へ戻る