CSS% für den vertikalen Rand basierend auf der Breite statt der Höhe

Question

Ich möchte einen Rand über meinem accountOrderButton erstellen, damit er vertikal zentriert werden kann. Ich versuche, die Hälfte der Höhe der Eltern div minus die Hälfte der Kinder divs Höhe zu berechnen.

Dies sollte die Schaltfläche jedoch die Zeile "margin-top: calc (50%);" In meinem CSS wird stattdessen die Breite des übergeordneten div zurückgegeben. Wie bekomme ich die Höhe?

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

Answer 1

Verwenden top statt margin-top, ohne calc, auch left: 50%; hinzufügen und fügen Sie transform: translate(-50%, -50%) es um die Hälfte seiner eigenen Höhe und Breite zurück zu bewegen. Dies erfordert auch eine absolute Position auf das Kind und die relative Position auf dem übergeordneten zu verwenden:

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

Answer 2

Wenn Sie möchten Blockelemente auszurichten, versuchen CSS flexbox zu verwenden. Definieren Sie ein Containerelement, in dem die Elemente so ausgerichtet sind, dass Sie es beliebig ausrichten können. Es wäre sicherlich mit Ihrem% Ansatz arbeiten, aber Ausrichten Elemente vertikal ist recht einfach mit Flexbox:

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

Sie brauchen keine Ränder, Positionierung oder etwas anderes. Bitte beachten Sie, dass Sie die float: left; als schwebend entfernen müssen, damit flexbox davon abhält.

Um eine float: left; gleichwertige Positionierung mit Flexbox zu bekommen einfach verwenden:

.container { 
    display: flex; 
} 

Answer 3

Da dies ein weit verbreitetes Missverständnis ist, ist es wahrscheinlich wert @ in einer Antwort CBroe Kommentar drehen, so dass andere es leicht zu finden.

Der Prozentsatz wird berechnet in Bezug auf die Breite der umschließenden Blocks des erzeugten Box. Beachten Sie, dass dies auch für margin-top und margin-bottom gilt.

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

Bitte beachten Sie auch, dass calc(50%) nicht alles an allen ist die Berechnung und ist zu 50% identisch.