問題のある変換を伴う絶対位置のセンタリング

Question

私はいくつかのリスト項目を中央に配置しました。私はそれが別のdivと重複するので絶対位置でそれをしなければならない。私は位置と変換プロパティでそれを行うことができます。しかし、デバイスの幅が小さい場合には問題があります。私はそれが可能な限り長く中心に置かれたい、しかし、デバイスの幅が十分に小さくなる前にそれは壊れます。 calcを使用して修正できますが、ulの幅が不明な場合はどうすればよいですか？あなたは、単にすべてで変換または位置せず、ulタグにtext-align: centerを追加しないのはなぜ
codepen

.parent { 
 
    height: 70px; 
 
    margin-top: 100px; 
 
    width: 100%; 
 
    background: #000; 
 
    position: relative; 
 
} 
 

 
ul,li { 
 
    list-style-type: none; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50% , 0); 
 
    clear:both; 
 
    display:block; 
 
} 
 

 
li { 
 
    height: 70px; 
 
    width: 70px; 
 
    background: #f44; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
}

<div class="parent"> 
 
    <ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
</div>

Answer 1

left: 0/right: 0それ全幅とtext-alignの中心になります。このようなあなたのulルールを更新しliの

ul { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    padding: 0; 
    margin: 0; 
    text-align: center 
} 

サンプルスニペット

.parent { 
 
    height: 70px; 
 
    margin-top: 100px; 
 
    width: 100%; 
 
    background: #000; 
 
    position: relative; 
 
} 
 

 
ul,li { 
 
    list-style-type: none; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center 
 
} 
 

 
li { 
 
    height: 70px; 
 
    width: 70px; 
 
    background: #f44; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
}

<div class="parent"> 
 
    <ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
</div>

Answer 2

。 liがインラインブロックの場合は、中央に配置され、ul境界でラップされます。