画像横のテキストをセンターに配置したい

解決済

質問者：tobimori
質問日時：2013/10/23 13:00
回答数：4件

HTML5, CSS3をベースに、添付画像(2)のような状態で作成したいなと思っております。

<ul>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
</ul>

HTMLはこんな感じでシンプルに。
特に何もしなければ、
(1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。
テキストが2行になると画像の下にずれ込みます。

しかし(2)のようにテキストをセンターに配置したいなと。
テキストは多くても2行でとどめるつもりなので、
1行でも2行でもセンターになるようにしたい。
ではと思ってまず思い浮かんだのが画像を「float: left」すること。
でもそうするとテキストがベースラインから回避できますが、
センターにはいかず、画像のトップと同じ位置に配置されます。

テキストが1行なら、反強制でPタグでくくって
「margin: top」で調整することもできるかと思いましたが、
2行分は設定したいのです。

ちなみに画像のサイズは指定しておりますが、
li自体には横幅の設定はしていますが高さ設定はしていません。
実質画像の高さが高さになることになります。

簡単にできることかと思っていたのですが、思いのほか苦戦しております。
ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2013/10/26 15:26

いわゆるtableで言うところの、vertical-align="middle" ですよ。

難しく考えないで、そのまま率直に、スタイルシートを書けば良いです。

個人的には、HTML5は古いブラウザには利きませんので、HTML4.01strictで十分だと思います。
サンプルはHTML5 + CSS2.1 です。文字コードはUTF-8
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
で検証済み
★タブは＿に置換してあるので戻す。
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">

<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="./a">あいうえおかきくけ</a></li>
＿＿＿＿<li><a href="./b">こさしすせそたちつてとなにぬね</a></li>
＿＿＿＿<li><a href="./c">のはひふへほ</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿＿<aside>
＿＿＿<h2>Something aside</h2>
＿＿</aside>
＿</section>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
お礼が遅くなってしまってすみません。
助かりました、思うような形になりましたです！

通報する

お礼日時：2013/11/25 14:43

No.3

回答者： Ogre7077
回答日時：2013/10/24 15:06

img と span に長さ制限をかけて、両者の合計値が親をはみ出さない様にしてはどうでしょう。

少々自由度が落ちてしまうのが欠点ですが

li { width:12em }
li a > img { vertical-align:middle; max-width:4em; }
li a > span { vertical-align:middle; max-width:8em; display:inline-block; }

<li> <a> <img> <span>長い文字列</span> </a>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
お礼が遅くなってしまってすみません。
思うような形にならず、でした。
重ね重ねありがとうございました。。

通報する

お礼日時：2013/11/25 14:42

No.2

回答者： Ogre7077
回答日時：2013/10/23 13:54

最近のブラウザ限定になりますが

<a> <img> <span></span> </a>
の形にして、

a > img , a > span { display:inline-block; vertical-align:middle; }
はどうでしょうか

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
1行だと確かにセンターにできました。
しかし2行になるとうまくいかず…
でも現状、このソースを使用させていただこうと思います。

通報する

お礼日時：2013/10/24 13:30

No.1

回答者： chie65535
回答日時：2013/10/23 13:47

<table border=0 cellpadding=0 cellspacing=0>

<tr><td valign=center><a href="#"><img src="i.jpg" alt="#" width="60" height="60"></a></td><td valign=center><a href="#">○○○○○</td></tr>
<tr><td valign=center><a href="#"><img src="i.jpg" alt="#" width="60" height="60"></a></td><td valign=center><a href="#">○○○○○○○○○○</td></tr>
<tr><td valign=center><a href="#"><img src="i.jpg" alt="#" width="60" height="60"></a></td><td valign=center><a href="#">○○○○○</td></tr>
</table>

と書くのが確実で手っ取り早い。

配置に困ったら「見えないテーブルで強制配置」しよう。