センタリングのテキストが機能しない

Question

私の検索では正しいテクニックを使用しているようですが、センタリングは起こっていません。

これは私の.htmlファイルからコード・ブロックです：

<div id="section-movement" class="section-container"> 
     <div class="section-title"> 
      Movement <span class="center">*click entries for more details*</span><span class="float-right">limited by movement speed</span> 
     </div> 
    </div> 

これは私の.cssファイルのエントリである：出力は「動きが」左揃え語でなければなりません

.center { 
    text-align: center; 
} 

.float-right { 
    float: right; 
} 

「詳細をクリックする」というテキストを中央に配置し、「移動速度によって制限される」テキストを右揃えにする必要があります。左と右のテキストは正常に機能しますが、「詳細をクリックする」テキストはセンタリングされていません。「移動」テキストのすぐ後に表示されます。

Answer 1

spanは、デフォルトでinline要素です。センタリングを使用する方法はの中にあります。spanの要素です。インラインであるため何もしません。

ブロックの要素である<span>の代わりに<div>を使用することができますが、これはあなたが想像するものであるかどうかわかりません - あなたの現在のコードでは、いくつかの単語を集中させようとしています基本的にテキスト段落の一部です...

文章の3つの部分を左、中央、右に分けて配りたいと思われます。あなたは、その親要素のために、このルールを追加します（彼らはすべて彼らのコンテナのフレックス定義により、フレックスのアイテムとなっているので、この特定のケースでは、それは問題ではありません）div要素またはスパンの中にすべての3つの部分を置くことができます。

.section-title { 
    display: flex; 
    justify-content: space-between; 
} 

.section-title { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div id="section-movement" class="section-container"> 
 
    <div class="section-title"> 
 
    <span>Movement</span><span>*click entries for more details*</span><span>limited by movement speed</span> 
 
    </div> 
 
</div>

Answer 2

センタータグを使うことができますか？

だから、それは次のようになります。

<行く>

...あなたが中心に...

<たいコンテンツ '/センター>

しかし、アポストロフィのなし。

Answer 3

このような何かを試してみてください：ここでは、完全なコードです。

あなたのHTMLをマイナーアップデートし、私が左に浮かべたスパンに「Movement」という言葉を入れました。私は右に右のクラスでスパンを浮かべて、text-align：centerのクラスでスパンの中央にあるセクションタイトルのクラスでdivに中心を追加しました。

divのcenter-centerルールをtext-align：centerルールに適用する必要はありません。

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

.left { 
    float: left; 
} 

.right { 
float: right; 
} 

https://jsfiddle.net/eulloa/k7LL0byt/1/