![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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自体には横幅の設定はしていますが高さ設定はしていません。
実質画像の高さが高さになることになります。
簡単にできることかと思っていたのですが、思いのほか苦戦しております。
ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。
![「画像横のテキストをセンターに配置したい」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/5/655327_5497d18162732/M.jpg)
No.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. …
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![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>
![「画像横のテキストをセンターに配置したい」の回答画像4](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/5/650963_5497eb383bece/M.jpg)
No.3
- 回答日時:
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>
ご回答ありがとうございました。
お礼が遅くなってしまってすみません。
思うような形にならず、でした。
重ね重ねありがとうございました。。
No.1
- 回答日時:
<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>
と書くのが確実で手っ取り早い。
配置に困ったら「見えないテーブルで強制配置」しよう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
リストの数字のフォントサイズ...
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
リストの左余白の削除方法
-
jQuery-もっと見るボタンをスマ...
-
ol要素の番号とリスト項目の離...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
htmlで鍵盤を描きたい
-
<ol><li> 左側にスペースがで...
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
list-style-type部分だけ大きく...
-
サイドメニューのロールオーバ...
-
ulタグやliタグの中でbrタグ...
-
リストマーカーをボックス内に...
-
動画の上に文字を乗せたい(HTM...
-
リストの入れ子とインデント
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
HTML ul li で横並びにナビゲー...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
HTMLで組織図を作成する方法
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
HTML5のfooterに見出しを付けて...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
ボタンを横に並べて表示させる方法
-
html <ul></ul>の並びで一行空...
-
画像にリンクを張ると画像がず...
-
アコーディオンメニューがかく...
-
ulとliで囲った文字の一部を変...
-
レスポンシブWebデザインでリン...
-
htmlの<ol>タグで、数字などを...
おすすめ情報