Inhalt vertikal auf die Mitte eines div ausrichten?

Ich habe ein div mit einigen Inhalt. Es hat eine Höhe von 31px und im Inneren hat der Knopf eine geringere Höhe.Inhalt vertikal auf die Mitte eines div ausrichten?

Ich habe eine andere Kopfzeile, die keine Schaltfläche enthält.

<div class="headerAndButton"> 
    <h3 class="h3">No button here, I only want to have this header have the same vertical alignment, height and margin as the other header</h3> 
</div>

Ich möchte in jedem div den <h3> Text vertikal auszurichten. Ich habe versucht, das Problem mit dem folgende SCSS zu lösen:

.headerAndButton { 
    margin-bottom: $space-300; 

    h3 { 
    min-height: 31px; 
    vertical-align: bottom; 

    button { 
     margin-left: $space 
    } 
    } 
}

Die vertical-align Eigenschaft hat keine sichtbare Wirkung. Der Text in der ohne die Schaltfläche ist oben ausgerichtet. Der Text in der anderen ist ein bisschen niedriger. Es wird auch oben ausgerichtet, wenn ich den Knopf entferne.

Wie kann ich diese Header die gleiche vertikale Ausrichtung haben? Ich bin nicht gut in CSS, also gibt es vielleicht ganz andere, bessere Möglichkeiten, das zu lösen.

Quelle

2016-07-08 user1283776

wollen Sie nur auf vertikale Elemente auszurichten oder die Header-Tags sollten auf gleicher Höhe sein, während man einen Button hat und der andere nicht? –

Die Schaltfläche befindet sich rechts neben der Kopfzeile. Ich möchte, dass die Kopftexte innerhalb ihrer divs die gleiche vertikale Ausrichtung haben, so dass es für mich einfach ist, zwischen den divs mit den Kopfzeilen und den darauf folgenden Nachrichtentexten den gleichen Abstand zu haben. – user1283776

Haben Sie die Möglichkeit, mit fester Schriftgröße zu arbeiten für den Header? Oder müssen Sie eine dynamische Lösung erstellen? –

Sie können dazu display:table-cell und dann vertical-align:middle verwenden.

JS Fiddle

(füge ich eine Grenze, so dass Sie die h3 ausgerichtet ist zu sehen)

Quelle

2016-07-08 09:19:42 Relisora

Sie mehrere Methoden, um vertikale align ein Element verwenden könnte. Zum Beispiel könnten Sie neue display: flex Methoden verwenden:

display: flex; 
justify-content: center; 
flex-direction: column;

Example

Wenn es kein Problem zu position: absolute Ihr Element Sie

position: absolute; 
top: 50%; 
transform: translate(-50%, -50%);

Es ist ein ziemlich gutes Tutorial von CSS-Tricks verwenden könnte, benannt Centering in CSS: A Complete Guide.

Quelle

2016-07-08 09:19:52

display: flex; 
justify-content: center; 
align-items: center;

gelten nur diese CSS-Code auf headerAndButton

Quelle

2016-07-08 09:23:06 vik

Inhalt vertikal auf die Mitte eines div ausrichten?

Antwort

Verwandte Themen