2つの兄弟divの1つを中央に配置

StackOverflow https://stackoverflow.com/questions/343282

  •  19-08-2019
  •  | 
  •  

質問

以下では、right-siblingがcontainer divの中央に 配置されるようにCSSを変更します。 （編集：絶対位置を使用しない）。 

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
      }
      #right-sibling {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>

現在の実装では、右兄弟のセンタリングは左兄弟の影響を受けます。これは、display: noneのスタイルにleft-siblingを追加することで確認できます。

（注：私が理解しているように、CSSの重要なポイントはタグ構造をプレゼンテーションロジックから分離することであり、これは本当にクレイジーな要求とは思えないため、HTML構造の変更は避けたいと思います。 CSSが処理します。）

TIA。

役に立ちましたか？

解決

これを機能させるために使用したトリックは、コンテナの左側にパディングを配置することです。左の兄弟がこのスペースに等しいが負のマージンを与えることで、このスペース内に座るように勧めることができます。

画像を完成させるために、左兄弟の幅と同じサイズのパディングをコンテナの右側にも配置します。

<html>
  <head>
      <style type='text/css'>      
        #container {
            width: 500px;
            padding-left:50px;
            padding-right:50px;     
            }      
        #left-sibling {
            border: solid 1px #000;
            float: left;
            width:50px;
            margin-left:-50px;  
        }      
        #right-sibling {
            border: solid 1px #000;
            text-align: center;

        }
        #container2 {
            width: 500px;   
            }  
</style>
  </head>
    <body>
        <div id='container'>      
            <div id='left-sibling'>Spam</div>
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container'> 
            <div id='left-sibling' style="display:none;">Spam</div>    
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container2'> 
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
      </body>
</html>

他のヒント

幅を左兄弟に設定し、同じ右詰めを右兄弟に設定してみてください

そのように

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
        width:50px;
      }
      #right-sibling {
        text-align: center;
        padding-right:50px;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>

float: left;の#left-siblingをposition: absolute;に変更できます。 これにより通常のフローから除外されるため、右兄弟には影響しません。

もちろん、これはデザインに他の副作用をもたらす可能性があります。

フローティング要素には常に幅を設定する必要があります。そうしないと、奇妙になります：）

置く場合

border: solid 1px #000;

両方のdivのルールで何が起こっているかがわかります-＃right-sibling divは親div（#container）の幅全体を埋めているため、テキストは実際には中央に揃えられますが 、そうではないようです！

text-align属性は、属性が適用されるコンテナ内のコンテンツの配置を制御します。次のスタイルを追加すると、見やすくなります。

#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

quirksmodeを避けるために、ドキュメントにdoctypeを追加することをお勧めします

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

および次のスタイル：

#container { width: 500px; position:relative; border:1px Solid Black; }
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; }
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

もちろん、必要に応じて兄弟のサイズを調整する必要があります。境界線は、実際に何が起こっているのかを示す素晴らしい仕事をします。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top