ulとcssの動的中心合わせ

Question

ul li形式で印刷するデータベースからデータを取得しています。データが異なるため、私たちは2つの李アイテムを持っているかもしれませんし、10人が知っているかもしれません。

幅が変わるulまたはdivを中央に配置する最適な方法は何ですか？私はdiv要素をセンタリングまたは私は以下を使用することになり、ULを知っ：

#name, ul { 
width:200px; /*set certain width */ 
margin:0 auto; /* center div */ 
display:block /* play friendly with the existing layout */ 
} 

私の問題は、div要素が200pxのか、200pxのを超えている可能性があるデータであり、結果としてそれが本当にのdiv中心が、センタリングされません位置合わせは幅に基づいています。

助けていただければ幸いです。

Answer 1

ここでは、動的コンテンツの長さを持つulの中心にすることができます。

あなたはdivの中ulをラップし

.wrapper{ 
    display:table; 
    margin: 0 auto; 
} 

これはulかかわらず、div要素の幅のdiv内を中央揃えになるようDIVにCSSプロパティを設定することができ、あなたは例を見ることができます以下：

Codepenリンクhttp://codepen.io/nadirlaskar/pen/RKbBpM

.wrapper{ 
 
    display:table; 
 
    margin: 0 auto; 
 
    background-color:yellow; 
 
} 
 

 
ul{ 
 
    background-color:red; 
 
} 
 

 
li{ 
 
    background-color:blue; 
 
}

<div class="wrapper"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2 is now large</li> 
 
    </ul> 
 
</div>