알 수없는 너비로 가운데 맞추기

Question

나는 일반적으로 다음 코드를 사용하여 동적 너비가있는 요소를 가운데에 배치합니다.

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

문제는 내가 원하는 것보다 빨리 크기를 조정하는 것입니다. 예.

내가 정말 이해가 안 나는 % 값을 사용하고 있다면, 왜 마진이 작아 계속하지 않습니다 메뉴가 아직 하나에 들어갈 수있는 두 줄에 간다? 여기

데모 : 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>