以未知宽度居中

Question

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

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

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

我真的不明白这一点，如果我使用％值，为什么边距不会继续变小？

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

Answer 1

white-space:nowrap;上的ul和display: inline-block; 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;}似乎可以解决问题。

＆＃13;

＆＃13;

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

＆＃13;

import java.util.Scanner;

public class CoffeeBot {
    public static void main(String[] args) {
        int a = Integer.parseInt(args[0]);
        int b = Integer.parseInt(args[1]);
        if ((a > 0) && (b > 0)) {
            System.out.print("Hello, what's your name? ");
        }
        String name;
        Scanner kb = new Scanner(System.in);
        name = kb.nextLine();
        System.out.print("Would you like to order some coffee, " + name + "? (y/n)");
        char yn;
        yn = sc.next().CharAt(0);

    }

}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用＆＃34; Theodore K的另一种方法。＆＃34;段

Demo

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;