Zentrale Elemente innerhalb von zwei Div vertikal

Question

Wie kann ich diese vier Tasten innerhalb ihrer eigenen div vertikal und horizontal zentrieren?

Update: Keine Flexbox bitte. Ich habe diesen Luxus nicht.

#outer { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: black; 
 
    display: table-cell; 
 
} 
 

 
#innerOne { 
 
    width: 400px; 
 
    height: 100px; 
 
    background-color: red; 
 
    vertical-align: middle; 
 
} 
 

 
#innerOne { 
 
    width: 400px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    vertical-align: middle; 
 
}

<div id="outer"> 
 
    <div id="innerOne"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    </div> 
 
    <div id="innerTwo"> 
 
    <button>Three</button> 
 
    <button>Four</button> 
 
    </div> 
 
</div>

Ich will "eins", "zwei" im blauen div vertikal und horizontal zentriert werden. Das Gleiche gilt für "drei" und "vier" im schwarzen div.

Ich habe viele verschiedene Optionen ausprobiert, indem ich ihre Anzeige auf Tabelle und Tabellenzelle ohne den gewünschten gewünschten Effekt eingestellt habe.

Answer 1

für eine einzelne Zeile, Sie eine line-height gleich der Box height zu vertical align in der Mitte der Inline-Inhalt nutzen könnten.

und text-align für den horizontalen Teil

#outer { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: black; 
 
    /*display: table-cell;useless here i believe*/ 
 
    text-align:center; 
 
} 
 

 

 
#innerOne, 
 
#innerTwo { 
 
    width: 400px; 
 
    height: 100px; 
 
    line-height:100px; 
 
    background-color: blue; 
 
} 
 
#innerOne { 
 
    background-color: red; 
 
}

<div id="outer"> 
 
    <div id="innerOne"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    </div> 
 
    <div id="innerTwo"> 
 
    <button>Three</button> 
 
    <button>Four</button> 
 
    </div> 
 
</div>

Answer 2

Da die Schaltflächen Inline-Blöcke sind, können Sie sie vertikal mit einem Pseudo-Element zentrieren. Das Pseudoelement hat die Höhe des Containers (.inner) und ist vertikal ausgerichtet, und alle Inline-Blöcke mit geringerer Höhe werden zentriert. Um sie horizontal zu zentrieren, setzen Sie text-align: center auf den Behälter (.inner).

#outer { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
.inner { 
 
    width: 400px; 
 
    height: 100px; 
 
    text-align: center; 
 
} 
 

 
.inner::before { 
 
    display: inline-block; 
 
    height: 100%; 
 
    content: ''; 
 
    vertical-align: middle; 
 
} 
 

 
#innerOne { 
 
    background-color: red; 
 
} 
 

 
#innerTwo { 
 
    background-color: blue; 
 
}

<div id="outer"> 
 
    <div id="innerOne" class="inner"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    </div> 
 
    <div id="innerTwo" class="inner"> 
 
    <button>Three</button> 
 
    <button>Four</button> 
 
    </div> 
 
</div>