1

この質問は、この関連する質問に提案された修正から生じました

外部、内部、アイテムの 3 つのネストされた div があります。

<div class="outer">
  <div class="inner"><div class="item"></div></div>
</div>

次の基本的な CSS があるとします。

.outer{
  width:50%;
  height:100px;
  border: 1px solid red;
  position:relative;
  overflow-x:hidden;
  box-sizing:border-box;
}
.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
  line-height:98px;
}
.item{
  width:100px;
  height:94px;
  background-color:yellow;
  display: inline-block;
  border:1px solid green;
  box-sizing:border-box;
  vertical-align:middle;
}

課題は、「項目」の div を垂直方向に中央に配置し、上下に等しい (またはゼロの) ギャップを持ち、垂直スクロールバーが表示されないようにすることです。

コードペンはこちら

アップデート：

以下で指摘したように、高さの異なる複数のアイテムを中央に配置する必要があることを付け加えておきます。これまでの最善の答えは、各項目に負のマージンを追加することです。その結果、次のようになります: http://codepen.io/anon/pen/dYWEYZ

ただし、他の 3 つのプロパティに依存するオフセットが必要なため、これは (私には) 悪臭がします。

4

3 に答える 3

0

使用display: table-cell;して、必要な垂直方向のセンタリングを取得できます。

.outer{
  width:50%;
  height:100px;
  border: 1px solid red;
  position:relative;
  overflow-x:hidden;
  box-sizing:border-box;
}
.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
  line-height:98px;
  display: table; //must change this as well
}
.item{
  width:100px;
  height:94px;
  background-color:yellow;
  border:1px solid green;
  box-sizing:border-box;
  vertical-align:middle;
  display:table-cell; //update display type
}
于 2015-10-07T15:31:53.617 に答える
0

フレックスボックスを使用する場合、これは簡単に実現できます。

.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
  line-height:98px;
  display:flex;
  align-items:center;
}
于 2015-10-07T15:23:11.697 に答える
0

簡単な解決策はhttp://codepen.io/anon/pen/jbmRjoです

これを .item クラスに追加するには:

margin-top: -5px;

これは、外部クラスと内部クラスの境界と、内部クラスの行の高さが原因です。境界線を 1px ではなく 2px にすると、余白の上は -9px になります。境界線を 1px のままにして、line-height を 96px にすると、余白の上は -3px になります。

では、なぜマイナスマージントップを使用できないのでしょうか?

于 2015-10-07T15:35:21.803 に答える