2

div画像を中央に配置し、右側に小さな説明を入れたいコンテナがあります。仕様は次のとおりです。

  1. 画像の下余白は 35px にする必要があります。
  2. 画像は常に画面全体に表示される必要があるため、画面が表示されるとサイズが変更されます。可能な限り最大のサイズにする必要がありますが、トリミングしたり、スクロールバーを使用したりしないでください。
  3. 画像はコンテナーに対して中央に配置し、テキストは右マージンに表示する必要があります。
  4. テキストは水平方向に左揃え、垂直方向に中央揃えで、画像から 30 ピクセル離して配置する必要があります。

tableコンテナでa を使用して s を使用しようとしましたdivが、きれいな解決策が見つかりません。リクエストに応じて、私が試した動作しないコードをお見せできます。

4

1 に答える 1

0

これはトリッキーなものでした。実際に使用されるタグは重要ではなく、要素の数とそれらがどのようにネストされているかだけです。

テキストの垂直方向のセンタリングは Flexbox を介して行われますが、これはサポートが限定されています (Chrome、IE10、Opera、Safari、ほとんどのモバイル ブラウザー)。Firefox (2009 Flexbox プロパティを使用) は通常ここにまとめられますが、絶対配置要素に適用すると Flexbox が機能しないというバグがあります。

http://cssdeck.com/labs/iu0gx2wk

マークアップ:

<div class="gallery">
  <article>
    <h1>My image title</h1>
    <img src="http://placekitten.com/640/480" alt="A really cute kitten" />
  </article>
</div>

CSS:

.gallery {
  padding: 0 230px;
  text-align: center;
}

article {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  vertical-align: text-bottom;
}

h1 {
  position: absolute;
  text-align: left;
  right: -230px;
  top: 0;
  bottom: 0;
  width: 200px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

または、要素を 1 つ追加し、table/table-cell 表示プロパティを使用して垂直方向のセンタリングを取得することもできます。

http://cssdeck.com/labs/lqgjgghw

マークアップ

<div class="gallery">
  <article>
    <h1><span>My image title</span></h1>
    <img src="http://placekitten.com/640/480" alt="A really cute kitten" />
  </article>
</div>

CSS

.gallery {
  padding: 0 230px;
  text-align: center;
}

article {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  vertical-align: text-bottom;
}

h1 {
  position: absolute;
  text-align: left;
  right: -230px;
  top: 0;
  bottom: 0;
  width: 200px;
  margin: 0;
  display: table;
}

h1 span {
  display: table-cell;
  vertical-align: middle;
}

* デモではパディング/位置が少しずれていることに注意してください。ここにリストされているコードは正しいです。

于 2013-06-28T16:19:32.577 に答える