未知の幅でセンタリング

Question

私は通常、次のコードを使って動的な幅の要素を中央に配置します。

.horz-vert-center { 
    position: absolute; 
    left: 50%; 
    top:50%; 
    transform: translate(-50%,-50%); 
} 

問題は、私が望むより早くサイズを変更することです。例えば。

私は本当にこれを理解していない私は％値を使用していた場合、なぜマージンが小さくなり続けるません。メニューは、それはまだ1に収まる可能性が二行に行きますか？ここ

デモ： https://codepen.io/garethj/pen/LWdaRr

Answer 1

"セオドア・K." を使用してちょうど別のアプローチ

Demo

.horz-vert-center { 
 
    width:50%; 
 
    margin: auto; 
 
    border: 1px #000 solid; 
 
    text-align: center; 
 
} 
 
.horz-vert-center li{ 
 
    display: inline-block; 
 
    float: none; 
 
} 
 

 
*{margin:0;padding:0;}

<ul class="horz-vert-center"> 
 
    <li>About</li> 
 
    <li>Work</li> 
 
    <li>Blog</li> 
 
    <li>Journal</li> 
 
</ul>

Answer 2

はli上ulとdisplay: inline-block; float: none;にwhite-space:nowrap;を追加するには、トリックを行うようです。

.horz-vert-center { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    white-space:nowrap; 
 
} 
 
.horz-vert-center li{ 
 
    display: inline-block; 
 
    float: none; 
 
} 
 

 
body {background:#ccc} 
 
*{margin:0;padding:0;font-family:arial;font-size:20px} 
 
ul {list-style-type:none} 
 
li {float:left;margin-right:10px} 
 
li:last-child {margin-right:0;}

<ul class="horz-vert-center"> 
 
    <li>About</li> 
 
    <li>Work</li> 
 
    <li>Blog</li> 
 
    <li>Journal</li> 
 
</ul>