float leftプロパティを持つすべての子要素を中央に配置する方法

Question

問題の解決策を見つけることができませんでした。私は子要素の間にスペースを必要としないので、私は浮動小数点数を追加しました：左の子要素に。しかし、要素が2行に壊れると問題を引き起こしています。

HTML：

<span class="section-title"> 
    <span class="yellow">This</span> 
    <span class="red">is</span> 
    <span class="brown">test</span> 
    <span class="">content</span> 
</span> 

CSS：

.section-title {text-align:center;} 
.section-title span {float: left; display:inline-block;} 

Answer 1

がfloat: left;をしないで、不要なスペースを削除しますが、親要素、再設定にfont-size: 0;を設定するにはあなたが望むfont-sizeへの子供のそれ。

また、デフォルトでdisplay: inline;のコンテナにはspanを使用しました。ここでは、display: block;の要素が必要です。 display: inline;では、テキストセンタリングは機能しません。

のでいずれかはspanまたは代わりspanのdivを使用する上でdisplay: block;を設定します。 divのデフォルトはdisplay: block;です。私は後者をお勧めしますが、あなたがHTMLを制御できるかどうかは分かりませんので、変更しませんでした。

.section-title { 
 
    text-align: center; 
 
    font-size: 0; 
 
    display: block; 
 
} 
 
.section-title span { 
 
    font-size: 36px; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
} 
 
.yellow { 
 
    color: yellow; 
 
} 
 
.red { 
 
    color: red; 
 
} 
 
.brown { 
 
    color: brown; 
 
}

<span class="section-title"> 
 
    <span class="yellow">This</span> 
 
    <span class="red">is</span> 
 
    <span class="brown">test</span> 
 
    <span>content</span> 
 
</span>

Answer 2

次のコードを試してください：あなたのコードを表示

.section-title { 
    text-align: center; 
    display: block; 
} 

.section-title span { 
    font-size: 36px; 
    display: inline-block; 
    text-transform: uppercase; 
    }