0

私は、隣同士に配置する必要がある他の2つのdivを含むdivコンテナを持っています。ただし、これらの 2 つのフローティング div は、外側の div の中央に配置する必要があります。どうやってやるの？

例: http://codepen.io/anon/pen/stHqI

HTML:

<div class="section-download clearfix">
<div class="section-download-cover">bla</div>
<div class="section-download-icon">yes</div>
</div>

CSS:

.section-download {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

.section-download-cover {
    float:left;
}

.section-download-icon {
    float: left;
}

ありがとう！

4

4 に答える 4

2

内側の div に幅を設定する必要があります。魔法のように中央揃えにはなりません。width: 50%;内部の各 div に追加します。

于 2013-10-17T18:32:45.410 に答える
2

親を に設定しdisplay:inline-block、 を使用text-align:centerして中央に配置できます。

かなりうまく機能します-jsFiddle here

HTML

<div id="parent">
    <div class="float"></div>
    <div class="float"></div>
</div>

CSS

#parent {
    display:inline-block;
    border:3px solid red;
}
.float {
    float:left;
    width:100px;
    height:100px;
    border:1px solid black;
}
于 2013-10-17T18:36:21.807 に答える
0

あなたの質問はあいまいです。しかし、外箱の中央に両方を並べて並べたいと言っているように思えますか？

見積もり：
"which should be aligned next to each other...in the center of the outside div"

これが必要な場合は、内側の各ボックスに高さと幅を追加する必要があります。このような：

.section-download-cover {
    float:left;
    width: 70px;
    height: 155px;
    background: #333;
}

.section-download-icon {
    float: left;
    width: 70px;
    height: 150px;
    background: #555;
}

更新：あなたが求めていると思うことを行うには、別のネストされた div を追加する必要もあります。
私はそれを と呼び.inner-container、2 つの内側の div を合わせた幅と同じ幅にする必要があります。たとえば、各 div の幅が 70 ピクセルの場合、外側の div は正確に 140 ピクセルの幅である必要があります。

CSS

.inner-container {
    margin: 0 auto;
    width: 140px;

}

HTML

<body>
  <div class="section-download clearfix">
    <div class="inner-container">
      <div class="section-download-cover">
          bla
      </div>
      <div class="section-download-icon">
        yes
      </div>
    </div>
  </div>
</body>

ワーキング jsbin:
http://jsbin.com/OXEPERi/1/

于 2013-10-17T18:52:42.907 に答える
0

これはあなたが望むことをするはずです:

.section-download {
   margin: 0 auto;
   width: 200px;
   height: 200px;
   border: 1px solid black;
   text-align: center;
}

.section-download-cover,
.section-download-icon {
   display: inline-block;
}

text-alignを中央揃えに設定してから、divinline-blockをテキストに合わせてフローさせるため、div を選択します。text-align: center

于 2013-10-17T18:33:44.243 に答える