html - 以未知宽度居中

Question

我通常使用以下代码将具有动态宽度的元素居中。

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

问题是元素会比我想要的更早调整大小。例如。当一个菜单仍然可以放在一行时，它会变成两行:

我不太明白，如果我使用 % 值，为什么边距不会继续变小？

演示在这里: https://codepen.io/garethj/pen/LWdaRr

Answer 1

在 ul 和 display: inline-block 上添加 white-space:nowrap;； float: none; 在 li 上似乎可以解决问题。

.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>