Ausrichten und zentrieren zwei Divs und zwei Header

Question

Ich habe 2 Divs und 2 H4-Header, die in einer Linie sein müssen. Versucht, mit Text-Ausrichtung und Float nach links auszurichten, aber es funktioniert nicht.

Aus meinem Verständnis, kann Seite an Seite-Ausrichtung erreicht werden, indem Sie float für die Elemente verwenden, aber es ist nicht in meinem Fall passiert. Auch nicht in der Lage, sie zu zentrieren. Derzeit versuchen, Marge mit einer 30% zu verlassen, die ich glaube, ist keine richtige Lösung. Die Bilder unten zeigen, wie es momentan aussieht und wie ich es aussehen lasse.

HTML

<div class="k-legend-title"> 
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div> 
<h4 class="">Driver 1</h4> 
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div> 
<h4 class="">Driver 2</h4> 

CSS

.k-legend-title{ 
    color: #C3CF01; 
} 

.k-stat-title-color-box { 
    width: 10px; 
    height: 10px; 
    border-radius: 25px; 
    background: #ccc; 
    float: left; 
    margin-top: 6px; 
    margin-right:5px; 
    margin-left: 30%; 
} 

Aktuelles Layout

Versuchen, dieses Layout zu bekommen. Zentrum und in 1 Zeile

Answer 1

Machen Sie sie auf Inline-Ebene, nicht Schwimmer verwenden. Dann können Sie sie horizontal auf ihrem Container durch text-align ausrichten und sie vertikal über vertical-align auf sich selbst ausrichten.

.k-legend-title { 
 
    color: #C3CF01; 
 
    text-align: center; 
 
} 
 
.k-stat-title-color-box, h4 { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 5px 0; 
 
} 
 
.k-stat-title-color-box { 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 25px; 
 
    background: #ccc; 
 
}

<div class="k-legend-title"> 
 
    <div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div> 
 
    <h4>Driver 1</h4> 
 
    <div class="k-stat-title-color-box" style="background-color: #652D91;"></div> 
 
    <h4>Driver 2</h4> 
 
</div>

Answer 2

standardmäßig h1-h6 Elemente hat display: inline-block in dieser Situation: Block, sollten Sie Anzeige verwenden.

h4{ 
    display: inline-block; 
} 

h4:first-of-type{ 
    margin-right: 15px; 
} 

JSfiddle here

Answer 3

Try display:inline-block mit Eltern mit text-align:center mit:

.k-legend-title { 
    text-align:center; 
    color: #C3CF01; 
} 

.k-stat-title-color-box { 
    width: 10px; 
    height: 10px; 
    border-radius: 25px; 
    background: #ccc; 
    display:inline-block; 
    margin-top: 6px; 
} 
h4 { 
    display:inline-block; 
} 
.k-legend-title h4:first-of-type { 
    margin-right: 10px; 
} 

Fiddle: https://jsfiddle.net/kaarccq4/