基於寬度而不是高度的垂直邊距的CSS％

我希望在我的accountOrderButton上創建邊距，以便它可以垂直居中。我正在計算父div的一半高度減去子div高度的一半。基於寬度而不是高度的垂直邊距的CSS％

這應該居中按鈕，但行'margin-top：calc（50％）;'在我的CSS是返回父div的寬度，而不是。我如何獲得身高？

HTML

<div id="accountOrder"> 
    <div id="accountOrderButton"> 
     Order Now! 
    </div> 
</div>

CSS

#accountOrder { 
    width: 400px; 
    float: left; 
    height:100%; 
    text-align: center; 
} 
#accountOrderButton { 
    width: 100px; 
    height: 20px; 
    margin: 0 auto; 
    margin-top: calc(50%); <---- returns width instead of height 
    padding: 20px; 
    background-color: <?php echo $data['secondary_color']; ?>; 
    border-radius: 10px; 
}

來源

2016-12-09 Enayet Hussain

https://www.w3.org/TR/CSS21/box.html#margin-properties：_「百分比是根據生成的框的包含塊的**寬度**來計算的。 **請注意，'margin-top'和'margin-bottom'也是如此。**「_ - 你想要的僅僅是使用CSS而已。但是有無數的其他方法來集中元素，所以做一些研究... https://css-tricks.com/centering-in-the-unknown/，https://css-tricks.com/centering-css-complete -guide/ – CBroe

另請注意，'calc（50％）'不計算*任何內容*，並且與'50％'相同。 – connexo

使用top代替margin-top，無鈣，還加left: 50%;並添加transform: translate(-50%, -50%)通過自身的高度和寬度的一半將其移回。這也需要使用絕對位置上的孩子和相對位置上的父：

#accountOrder { 
    width: 400px; 
    float: left; 
    height:100%; 
    text-align: center; 
    position: relative; /* added */ 
} 
#accountOrderButton { 
    position: absolute; /* added */ 
    width: 100px; 
    height: 20px; 
    top: 50%; /* changed */ 
    left: 50%; /* added */ 
    transform: translate(-50%, -50%); /* added */ 
    padding: 20px; 
    background-color: <?php echo $data['secondary_color']; ?>; 
    border-radius: 10px; 
}

來源

2016-12-09 15:23:49 Johannes

這是實現垂直居中的標準方法之一，因此是OP問題的有效解決方案。儘管如此，它沒有澄清OP的方法無效的原因。 – connexo

如果您想對齊塊元素，嘗試使用CSS flexbox。定義容器元素，以任何你喜歡的方式保存元素。它肯定會與你的做法％的工作，但對準物品垂直與Flexbox，就非常容易：

#accountOrder { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

你不需要任何的利潤，定位或別的東西。請注意，您必須移除float: left;，因爲浮動可防止柔性箱做其事。

要獲得與Flexbox的一個float: left;相當於定位簡單地使用：

.container { 
    display: flex; 
}

來源

2016-12-09 15:23:30 actc

因爲這是一個普遍的誤區，它可能是值得轉彎@ CBroe的評論爲答案，讓其他人很容易地找到它。

的百分率的計算相對於所生成的框的包含塊的寬度。請注意，margin-top和margin-bottom也是如此。

http://w3.org/TR/CSS21/box.html#margin-properties

同時請注意，calc(50%)不計算在所有任何東西，是相同的50%。

來源

2016-12-09 15:25:17 connexo

基於寬度而不是高度的垂直邊距的CSS％

回答

相關問題