- ベストアンサー
画像横のテキストをセンターに配置したい
- HTML5, CSS3を使用して画像横のテキストをセンターに配置する方法について質問です。
- 画像とテキストが横並びになっているリスト内の要素で、テキストをセンターに配置したいと思っています。
- 現在、テキストが2行になると画像の下にずれ込んでしまいますが、画像のベースラインとテキストのベースラインが同じ位置に配置されるようにしたいです。また、テキストが1行でも2行でもセンターになるようにしたいです。どのように設定すれば良いでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
いわゆる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"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <style media="screen"> <!-- header nav ul{ list-style:none; display:table; border-collapse:separate; border-spacing:3px; width:200px; margin:0 auto; padding:0; position:relative; } header nav ul li{ display:table-row; } header nav ul li a{ vertical-align:middle; display:table-cell; border:black 3px solid; padding:2px 2px 2px 64px; width:140px; height:56px; color:white; background-color:black; } header nav ul li a:before{ position:absolute; left:6px; } header nav ul li a[href="./a"]:before{content:url(./images/aa.gif);top:6px;} header nav ul li a[href="./b"]:before{content:url(./images/bb.gif);top:75px} header nav ul li a[href="./c"]:before{content:url(./images/cc.gif);top:144px} header nav ul li a:hover{color:yellow;} header nav ul li a:active{color:red;} --> </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>
その他の回答 (3)
- Ogre7077
- ベストアンサー率65% (170/258)
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>
お礼
ご回答ありがとうございました。 お礼が遅くなってしまってすみません。 思うような形にならず、でした。 重ね重ねありがとうございました。。
- Ogre7077
- ベストアンサー率65% (170/258)
最近のブラウザ限定になりますが <a> <img> <span></span> </a> の形にして、 a > img , a > span { display:inline-block; vertical-align:middle; } はどうでしょうか
お礼
ご回答ありがとうございました。 1行だと確かにセンターにできました。 しかし2行になるとうまくいかず… でも現状、このソースを使用させていただこうと思います。
- chie65536（@chie65535）
- ベストアンサー率44% (8740/19838)
<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> と書くのが確実で手っ取り早い。 配置に困ったら「見えないテーブルで強制配置」しよう。
お礼
ご回答ありがとうございました。 確かに手っ取り早い手段ではありますが、 個人的に好ましくないと思いました。 恐縮です。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご回答ありがとうございました。 お礼が遅くなってしまってすみません。 助かりました、思うような形になりましたです！