以未知寬度爲中心

我通常使用以下代碼將具有動態寬度的元素居中。以未知寬度爲中心

.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

以未知寬度爲中心

回答

相關問題