画像とテキストを横方向中央に揃える

ブロック要素内の画像とテキストを横方向中央揃えにするには、「vertical-align」を使います。(にししふぁくとりーさんの「行内の画像を、文字の（上下方向での）中心に合わせて配置する」を参考にさせていただきました。)

最も高さのあるインライン要素に対して、「vertical-align:middle;」を指定します。
- これにより、低い要素は高い要素の中央に配置されます。
- インライン要素の高さが可変な場合は、すべての子要素に「vertical-align:middle;」を指定するとOKです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
       div {
           margin:10px;
       }
       img.middle {
           vertical-align:middle;
       }
       span.l {
           font-size:36px;
       }
       div.middle * {
           vertical-align:middle;
       }

       p {
           margin-top: 20px;
       }
       h4 {
           padding:5px 0px 0px 0px;
       }
    </style>
  </head>
  <body>
   <p>
     <b>■画像と文字列を並べる </b>画像が大きい場合、文字列は下にそろう。
     <div>
         <img src="./img.jpg"/><span>画像に続く文字列。</span>
     </div>
   </p>
   <p>
     <b>■画像に「vertical-align:middle」を指定。</b>
     画像が大きい場合はこれでOKだが、テキストの方が大きい場合、画像が底辺にそろう。
     <div>
         <img class="middle" src="./img.jpg"/>
         <span>画像に続く文字列</span>
     </div>
     <div>
         <img class="middle" src="./img-s.jpg"/>
         <span class="l">画像に続く文字列。</span>
     </div>
   </p>

   <p>
     <b>■divの子要素すべてに「vertical-align:middle」を指定。</b>テキスト、画像のどちらが大きい場合も中央にそろう。</h4>
     <div class="middle">
         <img src="./img-s.jpg"/>
         <span class="l">画像に続く文字列。</span>
     </div>
   </p>
  </body>
</html>

確認はこちらから

修正 (2007-08-30)

×縦方向中央揃え→横方向中央揃え