CSS:複数のDIVを同じ行の中央に表示する一つの実現方法

1018 ワード

ブラウザ css IE クラス div

プロジェクト開発では,画面に複数のDIVの内容が1行に表示されることが多い.
例えばHTML

<div class="div_allinline">
	<div class="subdiv_allinline">
	   ，  div1    。
         <br>  ，  div1    
       </div>
	<div class="subdiv_allinline">
	   ，  div2    。
       </div>
       <div class="subdiv_allinline">
	   ，  div3    。
         <br>  ，  div3    
       </div>
</div>

どのようにして1行に中央に表示しますか?この処理はinline-blockを使用して行います.

<style type="text/css">

.div_allinline
{
    text-align:center;
    margin:0 auto;
    padding:0;
    clear:both;
 }

.subdiv_allinline
{
    margin:0;
    padding:0;
    display:inline-block;
    _display:inline;
    *display:inline;
    zoom:1;
}
</style>

IE 6,IE 7ではinline-blockがサポートされていないため,IE 6に対して,IE 7は以下の3つの属性を記述する.
_display:inline; *display:inline; zoom:1;
これで主流のブラウザに正常に表示されるようです.divの幅は状況に応じて設定できます.

Sass@ルール

CSSにおけるpositionのパーセンテージ表現法及び絶対位置中央