148

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

他の多くの div を含む div があり、それぞれが左に浮かんでいます。これらの div には、それぞれ写真とキャプションが含まれています。私が望むのは、写真のグループを含む div 内の中央に配置することだけです。

以下のコードからわかるように、親 div で と の両方を使用してみました。写真の後に (別のトピックで提案されているように) も追加しましoverflow:hiddenた。何も違いはないようです。margin:x autoclear: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>
4

7 に答える 7

272

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>
于 2009-08-12T23:22:08.660 に答える
5

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;
}
于 2012-08-20T14:31:05.930 に答える
5

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

于 2014-11-22T12:49:50.453 に答える
3

解決：

<!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>
于 2013-05-23T06:19:22.833 に答える
1

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

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

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

例 (各要素には 2 つの辺があるため、border、margin、padding は 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>

于 2016-08-25T03:15:02.797 に答える