如何在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;
}

*请注意，这些演示的填充/位置有些偏离，此处列出的代码是正确的。