CSSで画像を中央に持っていく方法。

質問

簡単な問題です。

画像を
liの枠内の上下左右中央に配置するには、どうすればいいでしょうか？

画像のサイズがまちまちなので、
paddingなどで数値を指定するのは、NGです。

vertical-align:middleはだめでした。
text-align:centerで左右の中央に持って行く所まで、できました。

HTML
====================
<ul class="book_slide">
<li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li>
<li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li>
</ul>
======================

css
=======================
ul.book_slide li{
float:left;
height:114px;
width:80px;
border:1px solid #000;
text-align:center;
}
=======================

回答No.2

ORUKA1951 · ベストアンサー

意外と厄介な方法で、文書構造を無視してHTMLをマークアップすれば出来なくはないですが、邪道ですので、極力そのリストであるマークアップを変更しない方法です。
ただし、古いブラウザには利きません。
<div class="book_slide">
＿<ul>
＿＿<li><img src="images/book1.jpg" width="30" height="50" alt="*" /></li>
＿＿<li><img src="images/book2.jpg" width="54" height="32" alt="*" /></li>
＿＿<li><img src="images/book3.jpg" width="60" height="48" alt="*" /></li>
＿＿<li><img src="images/book4.jpg" width="48" height="33" alt="*" /></li>
＿</ul>
<div>
の場合CSSは
div.book_slide{display:table;}
div.book_slide ul{display:table-row;}
div.book_slide ul li{display:table-cell;height:360px;width:500px;border:1px solid #000;text-align:center;vertical-align:middle;list-style:none;}

display:tableがなくてもOKなので
<ul class="book_slide">
＿＿<li><img src="images/book1.jpg" width="30" height="50" alt="*" /></li>
＿＿<li><img src="images/book2.jpg" width="54" height="32" alt="*" /></li>
＿＿<li><img src="images/book3.jpg" width="60" height="48" alt="*" /></li>
＿＿<li><img src="images/book4.jpg" width="48" height="33" alt="*" /></li>
</ul>
と、
ul.book_slide{display:table-row;}
ul.book_slide li{display:table-cell;height:360px;width:500px;border:1px solid #000;text-align:center;vertical-align:middle;}
でもＯＫです。

ウェブ標準な方法なら、上のいずれかかで、画像でないテキストの場合も中央に配置されます。

一方、画像を背景で指定する方法もあります。こちらだと古いブラウザやテキストブラウザなどを考えると良いかもしれません。

<ul class="book_slide">
＿＿<li><span>書名</span></li>
＿＿<li style="background-image:url(images/book2.jpg);"><span>書名</span></li>
＿＿<li style="backfround-image:url(images/book3.jpg);"><span>書名</span></li>
＿＿<li style="background-image:url(images/book4.jpg);"><span>書名</span></li>
</ul>
に対して
ul.book_slide,ul,book_slide li{display:block;list-style:none;}
ul.book_slide li{
＿float:left;height:114px;width:80px;border:1px solid #000;
＿background:url(images/book1.jpg) 50% 50% no-repeat;
}
ul.book_slide li span{visibility:hidden;}

回答No.1

noname#158634

＞簡単な問題です。
なんで自分はできないくせに簡単とか判断できたの？

↓はい参考。
http://www.webbibo.com/blog/htmlcss/vertical.html
Googleでは「css　上下中央」でいくらでもヒットするから次からはこんな「簡単な問題」はまずググってね。