複数行のテキスト、サイズの不規則な画像を垂直に中央に配置

1278 ワード


ここに複数行の文字が表示されます.
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; 
padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; 
vertical-align:middle;}
.zxx_align_box_2 span.zxx_align_word{display:inline-block; 
font-size:0.1em; vertical-align:middle;}

いくつかの簡単な説明があります:1.この例はemを単位として、もしあなたがem単位に対して理解が足りなくて、把握できないならば、pxを単位として使うことができて、値は交換します;2.外部divはフローティングを使用できません.3.外部div高さと文字サイズの割合1.14が望ましい.4.内部ラベルのvertical-align:middleは省略できますが、外部divの高さと文字の大きさの割合を変更するには、自分で試してみましたが、フォントより1.5程度の高さの様子です.5.システムの原因、私はIE 8の下でテストすることができませんでした.
-----------------------------------------------------------------------------------------------------
      
  •           


.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;} .zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;} .zxx_align_box_6 li .show_img{vertical-align:middle;}