以未知宽度为中心

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

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

问题是元素会调整比我想要的更早。例如。菜单去两条线时，它仍然可以装入一个：

我真的不明白这一点，如果我使用％的值，为什么不利润率不断变小？

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

来源

2017-03-22 user1059511

它工作正常，我。 –

不断调整大小 - 它折叠之前它应该 – user1059511

你可以给它一个值'display：inline-flex'？ – zik

使用 “西奥多·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>

来源

2017-03-22 13:19:25

如果删除“宽度：50％”，则适用。如果你正在处理非文本元素，这不起作用。 – user1059511

它现在可以满足要求，因为宽度是50％（并且文本会折叠在问题中的代码行上，并且它不是垂直居中的（就像在问题中一样） –

上的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>

来源

2017-03-22 11:31:03

为中心，谢谢你nowrap为我的例子工作。如果它不是文字，我猜这是行不通的。我如何以5％的利润率为中心？我想我的代码是说总是保持在50％宽度的元素？ – user1059511

以未知宽度为中心

回答

相关问题