別のdiv内のフローティングdivの中央揃え

私は他の質問を検索しましたが、この問題は他のいくつかの問題と似ているようですが、今のところ、私が抱えている問題に対処しているようには見えません。

他のdivを多数含むdivがあり、それぞれが左にフロートされています。これらのdivにはそれぞれ写真とキャプションが含まれています。必要なのは、写真のグループが含まれているdivの中央に配置されることだけです。

以下のコードからわかるように、私は両方overflow:hiddenとmargin:x auto親div を使用してみました。またclear:both、写真の後に（別のトピックで提案されているように）を追加しました。違いは何もないようです。

ありがとうございました。私はどんな提案にも感謝します。

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

まず、float内側divのsの属性を削除します。次に、text-align: centerメインのアウターを着用しdivます。また、内側divのsにはを使用しますdisplay: inline-block。また、明示的な幅を与えることも賢明かもしれません。

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

フレキシボックス簡単に、水平方向（垂直方向）の中心は、できる子供浮かべ divの内側に。

したがって、次のような単純なマークアップがある場合：

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSSを使用：

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

（これは（予想される-望ましくない）結果です）

次に、次のルールをラッパーに追加します。

display: flex;
justify-content: center; /* align horizontal */

浮かれた子供は中央に配置されます（デモ）

ちょうど楽しみのために、垂直方向の配置を取得するだけでなく、追加します：

align-items: center; /* align vertical */

デモ

相対配置と右へのフローティングを使用して、上記を達成しました。

HTMLコード：

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

CSS：

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle：http ://jsfiddle.net/MJ9yp/

これはIE8以降で機能しますが、それ以前のバージョンでは機能しません（驚き、驚きです！）

残念ながら、この方法の出典を思い出しません。そのため、元の作者を信用することはできません。他の誰かが知っている場合は、リンクを投稿してください！

次のソリューションはインラインブロックを使用しません。ただし、2つのヘルパーdivが必要です。

1. コンテンツはフローティングです
2. 内部ヘルパーはフロートされています（コンテンツと同じくらい伸びます）
3. 内側のヘルパーを右に50％押します（左は外側のヘルパーの中心に揃えます）
4. コンテンツは左に50％プルされます（中央が内側のヘルパーの左に揃います）
5. 外側のヘルパーはオーバーフローを隠すように設定されています

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}

<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>

display: inline-block;どのIEブラウザーでも機能しません。これが私が使ったものです。

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

解決：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>

私の場合、@ Sampsonで答えを得ることができませんでした。せいぜい、ページの中央に1列しかありませんでした。しかしその過程で、フロートが実際にどのように機能するかを学び、このソリューションを作成しました。基本的に、修正は非常に単純ですが、この投稿の時点で言及のない14万6千回以上の閲覧があったこのスレッドから明らかなように、見つけるのは困難です。

必要なのは、目的のレイアウトが占める画面スペースの幅の合計を合計し、親を同じ幅にして、margin：autoを適用することだけです。それでおしまい！

レイアウトの要素は、「外側」のdivの幅と高さを決定します。各「myFloat」または要素の幅または高さ+その境界線+マージンとそのパディングを取り、それらをすべて一緒に追加します。次に、同じ方法で他の要素を一緒に追加します。これにより、親の幅が得られます。それらはすべて多少異なるサイズにすることができ、より少ないまたはより多い要素でこれを実行できます。

例（各要素には2つの側面があるため、境界線、マージン、パディングはx2倍になります）

したがって、幅10px、境界線2px、マージン6px、パディング3pxの要素は次のようになります：10 + 4 + 12 + 6 = 32

次に、要素の合計幅をすべて追加します。

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

この例では、「外側」のdivの幅は112になります。

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}

<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>