css - 如何将图像以 DIV 为中心并将文本放在右侧？溢出问题

Question

我有一个div容器，我想在其中放置居中的图像和右侧的小描述。规格如下：

1. 图片的下边距应为 35 像素。
2. 图像应始终完全显示在屏幕上，因此它会在屏幕显示时调整大小。它应该具有尽可能大的尺寸，但永远不要被裁剪，也不要使用滚动条。
3. 图像应该相对于容器居中，文本显示在右边距。
4. 文本应水平左对齐，垂直居中对齐，并与图像相距 30 像素。

我尝试table在容器中使用 a 并使用divs，但找不到干净的解决方案。我可以根据要求向您展示我尝试过的无效代码。

Answer 1

这是一个棘手的问题。实际使用的标签并不重要，重要的是元素的数量和它们的嵌套方式。

文本的垂直居中是通过 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;
}

* 请注意，演示的填充/定位稍微偏离了一点，此处列出的代码是正确的。