2つのdivと2つのヘッダーを整列して中央に置く

Question

2つのdivと2つのH4ヘッダーが必要です。テキストの整列と整列しようとすると左に浮かんだが動作しません。

私の理解から、要素のために浮動小数点を使用することによって、横並びの整列を達成できますが、私の場合は起こりません。またそれらを中心に置くこともできません。現在、私は適切な解決策ではないと信じて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%; 
} 

現在のレイアウト

このレイアウトを取得しようとしています。センターと

Answer 1

1行では、それらのインラインレベル確認し、浮動小数点数を使用しないでください。次に、コンテナ上に水平に整列してtext-alignを配置し、垂直方向にvertical-alignまで整列させることができます。デフォルトのH1-H6要素によって

.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

表示があります。このような状況ではインラインブロック：ブロックは、あなたがディスプレイを使用する必要があります。

h4{ 
    display: inline-block; 
} 

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

JSfiddle here

Answer 3

text-align:centerを使用して親とdisplay:inline-blockを使用してみてください：

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

フィドル：あなたのフロートが望ましい結果を与えるものではありませんhttps://jsfiddle.net/kaarccq4/