web-dev-qa-db-ja.com

CSS：テキストの横にフローティング要素があるにもかかわらず、テキストを中央に配置するにはどうすればよいですか？

基本的に、フローティングの兄弟要素を無視して、テキストを中央揃えにします。

最初は、兄弟要素の幅からフローティング要素をとらないという印象を受けたので、これは問題にならないだろうと思いました。

例 （緑のテキストにもかかわらず、赤いテキストを青いボックスの中央に配置したい）

これはどのようにして最もよく達成されますか？

csscentering
28
Christoph Wurm

できません。親ボックスの中央に配置されている場合、フロートはある時点でコンテンツとオーバーラップし、フロートのポイントを無効にします。ここで使用できるアプローチは2つあります。フロートの幅がわかっている場合は、等しい負の右マージンを適用できます。それ以外の場合は、要素を絶対に配置できます このように 。

18
Eric

動作するフィドルへのリンクは次のとおりです。 http://jsfiddle.net/cD657/3/

（あなたの例では、<span>を開き、</div>で閉じました）

私はそれをdivにして、margin: 0px auto;と幅を与えました。 -トリックをするように見えた

8
Dave

そのままにしておくことができますが、フローティング要素の幅と同じピクセル値で反対側にパディングを追加するだけです。

.parent{        
    text-align: center;
}
.centered.element{
     padding-left: [width of floating element]px;
}

.floating.element{
     float: left;
}

幅を簡単に見つけるには、最新のブラウザでDeveloper Toolsを使用して要素をInspectするだけです。

ここでフィドルを参照してください： http://jsfiddle.net/cD657/369/

注：中央の要素にbackground色が割り当てられている場合、これは機能しない可能性があります。

0
ChickenFeet