CSSを使ってwebページのレイアウトをしています。
画像の高さの真ん中あたりに、文章を配置したいのですが、方法を教えてください。
「vertical-align:middle;」で指定してみたら1行の文ではうまく行ったのですが、複数行になるとうまくいきません。
どうすれば、複数行の文章で上手く指定できるでしょうか。
[ソース]
<style>
.test{
width:530px;
height:263px;
background-color:#ffcccc;
font-size:10pt;
}
img{
vertical-align:middle;
}
</style>
<div class="test">
<p>
テキスト<br>
テキスト<br>
テキスト<strong>テキスト</strong>テキスト<br>
<img src="画像のURL"width="250" height="259" alt="画像の名前">
</p>
</div>
No.1ベストアンサー
- 回答日時:
<img>はインライン要素ですので、テキスト同様、1つの画像で1行と見なされますので、段組表示にする必要があります。
paddingやmarginでも特定の環境であれば表示は出来ますが、
ブラウザの文字サイズを変更すれば中央ではなくなりますし、
たぶんこのレイアウトは、テーブルでなければ出来ないと思いますが、
1つのセルが画像だけの場合は、画像未対応かつテーブル未対応ブラウザでは
ALT=""を指定するとそのセル(テーブル)は消滅しますので、ユーザビリティーは問題ないと思います。
(CSSでできるという方がいらっしゃいましたら、後学のためにも是非教えて頂きたいです)
td {
vertical-align:middle;
}
<table><tbody>
<tr>
<td>画像の名前<br>画像についての解説</td>
<td><img src="image.jpg" alt=""></td>
</tr>
</tbody></table>
ALTを指定したり、
CSS未対応ブラウザ(の、テーブル対応ブラウザ)では、右側に画像を置くのではなく、テキストの下に置きたいという場合は、テーブルは使用できませんので、
中央表示ではなく、上段表示にしなければならないと思います。(vertical-align未指定と同じ位置)
この回答への補足
そろそろ質問を締め切りたいと思います。
>No.1さん
結局、暫定的にテーブルを使用するという形でレイアウトをしました。
ご回答ありがとうございました!
回答ありがとうございます。
なかなか難しいんですねぇ。
実はWeb標準の勉強をするためにCSSの勉強をしています。だから、出来ればテーブルを使いたくないと思いまして、この質問をしてみました。
でもとりあえず、No.1さんの案を試してみてからまた考えます。自宅のパソコンにこのhtmlファイルがないので(^_^;)月曜日になってしまいますが…。
あと、何かの偶然でこれをご覧の皆様!
No.1さんも仰っているように、もしCSSで出来るという方がいらっしゃいましたら、お願いします!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
透過するには?
-
HPに縦線を!!
-
縦線と横線だけを表示させたい。
-
Adobe Fireworksで素材作ってか...
-
箇条書きリストのすぐ横に画像...
-
文章を、画像の縦方向の位置の...
-
line-heightをページ全体に適用...
-
既存のHPを中央寄せ
-
WEBデザイナーの方にレイアウト...
-
テーブルの横に文字を置くタグ
-
Web表示がずれます(Dreamweave...
-
DreamweaverMX2004でのテーブル...
-
テーブル内での改行がうまくい...
-
topにインラインフレームを入れ...
-
テーブルタグを作成した後、プ...
-
2カラムレイアウトのページで...
-
TABLEタグの幅指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
テーブルの横に画像を
-
HTMLでテーブルを横に並べる方法
-
tableのheight指定が効かない
-
テーブル内に画像を表示したい。
-
ウィンドウのサイズを変えても...
-
箇条書きリストのすぐ横に画像...
-
2つのテーブルを左右に表示した...
-
【CSS】縦横スクロールテーブル...
-
画像の横にテーブルを。。。
-
HTMLでページの幅を設定し...
-
ヘッダー固定のスクロールが可...
-
CSSで文字を一番下の中央に表示...
-
プルダウンの表示位置
-
テーブル内でdlタグ使った際の...
-
一つのテーブル内の文字色だけ...
-
ホームページのテーブルに斜線...
-
テーブルでスクロールを同期したい
-
画像と、セルのつなぎ目に白い...
おすすめ情報