web-dev-qa-db-ja.com

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

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

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

以下のコードからわかるように、親divでoverflow:hiddenとmargin:x autoの両方を使用してみました。また、写真の後に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>
htmlcentercss
137
Darren

まず、内部のfloatsのdiv属性を削除します。次に、メインの外部divに text-align: center を配置します。内部のdivsには、 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>
260
Sampson

Flexbox を使用すると、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;
}

（これは（予想される-および望ましくない） RESULT ）

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

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

そして、フロートされた子は中央に揃えられます（DEMO）

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

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

DEMO

33
Danield

相対的な位置決めと右へのフローティングを使用して上記を達成しました。

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以降で動作しますが、以前のバージョンでは動作しません（驚き、驚きです！）

残念ながら、このメソッドのソースを思い出せないので、元の著者に信用を与えることはできません。他の誰かが知っている場合は、リンクを投稿してください！

10
Kendolein

次のソリューションは、インラインブロックを使用しません。ただし、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>
5
Salman A

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;
}
4
Abdulla Kaleem

解決策：

<!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>
2
Touhid Rahman

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

必要なのは、目的のレイアウトが占める画面スペースの幅を合計し、親を同じ幅にして、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>
1
dimmech