如何在DIV中居中放置圖像，並在右側放置文本？ 溢出問題

Question

我有一個div容器，我想在其中放置居中的圖像，並在右側添加一個小說明。 規格為：

1. 圖片的底邊距應為35px。
2. 圖像應始終在屏幕上完全顯示，因此在屏幕顯示時會調整大小。 它應具有盡可能大的尺寸，但切勿裁切且不要使用滾動條。
3. 圖像應相對於容器居中，文字應顯示在右邊緣。
4. 文本應水平左對齊，垂直居中對齊，並且與圖像的間距為30px。

我嘗試在容器中使用table並使用div ，但是找不到干凈的解決方案。 我可以向您展示我已根據要求嘗試的無效代碼。

Answer 1

這是一個棘手的問題。 實際使用的標簽並不重要，僅涉及元素的數量及其嵌套方式。

文本的垂直居中是通過Flexbox完成的，Flexbox支持有限（Chrome，IE10，Opera，Safari，大多數移動瀏覽器）。 Firefox（具有2009 Flexbox屬性）通常會放在此處，但是它有一個錯誤，如果將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;
}

或者，您可以添加一個額外的元素，並使用表格/表格單元格顯示屬性獲取垂直居中。

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;
}

*請注意，這些演示的填充/位置有些偏離，此處列出的代碼是正確的。