Выровняйте и центрируйте два divs и два заголовка

Question

У меня есть 2 divs и 2 H4 headers, которые должны быть в линии. Попробовал выровнять с выравниванием текста и поплыть влево, но он не работает.

С моей точки зрения, выравнивание бок о бок может быть достигнуто с помощью поплавка для элементов, но это не происходит в моем случае. Также не удается центрировать их. В настоящее время попытка использовать маржу остается на 30%, что, я считаю, не является правильным решением. Изображения ниже показывают, как это выглядит в настоящее время и как я пытаюсь сделать это.

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

Текущий Компоновка

Попытка получить этот макет. Центр и в 1 линии

Answer 1

сделать их инлайн-уровня, не использовать поплавки. Затем вы можете выровнять их по горизонтали через text-align на своем контейнере и выровнять их по вертикали через vertical-align на себя.

.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

По умолчанию h1-h6 элементов имеет дисплей: блок, вы должны использовать дисплей: встроенный блок в этой ситуации.

h4{ 
    display: inline-block; 
} 

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

JSfiddle here

Answer 3

Попробуйте использовать display:inline-block с родителем, используя text-align:center:

.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/