以未知宽度居中

时间:2017-03-22 11:24:05

标签: html css centering

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

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

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

enter image description here

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

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

2 个答案:

答案 0 :(得分:1)

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



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

答案 1 :(得分:0)

使用&#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;