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を含めて...
-
ウィンドウのサイズを変えても...
-
テーブルの横に画像を
-
インラインフレームの隣に画像...
-
はじめて質問させていただきます。
-
テーブルの横に文字を置くタグ
-
テーブル内に画像を表示したい。
-
画像の横にテーブルを。。。
-
テーブルの位置を細かく指定し...
-
table内にiframeでテーブルが崩...
-
商品詳細を横並びに表示する方法
-
テーブルの行を折りたたみたい...
-
TABLEのセルの中の文字を行単位...
-
テーブル幅が固定できない
-
テーブルとテーブルの間隔について
-
formのinputなどの幅100%指定
-
テーブルのヘッダとボディの幅...
-
正規表現で「より前」と「より後」
-
テーブルの任意の列を非表示に...
-
この出品にある送料表の作り方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
ウィンドウのサイズを変えても...
-
HTMLでテーブルを横に並べる方法
-
テーブル内に画像を表示したい。
-
ヘッダー固定のスクロールが可...
-
tableのheight指定が効かない
-
箇条書きリストのすぐ横に画像...
-
【CSS】縦横スクロールテーブル...
-
DWで、デザインビューに表示さ...
-
更新するとずれる?
-
複数のテーブルを無条件に中央...
-
2つのテーブルを左右に表示した...
-
一つのテーブル内の文字色だけ...
-
<SPAN>で文字を右揃えにしたい...
-
テーブルでスクロールを同期したい
-
画像の横にテーブルを。。。
-
スタイルシートで、画像の横に...
-
テーブルの高さ幅の固定方
おすすめ情報