Question

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

图片的底边距应为35px。
图像应始终完全显示在屏幕上，因此在屏幕显示时会调整大小。它应该具有尽可能大的尺寸，但永远不会被裁剪，也不会使用滚动条。
图像应相对于容器居中，文本显示在右边缘。
文本应水平左对齐，垂直居中对齐，与图像分开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;
}

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

如何将图像置于DIV中心并将文本放在右侧？溢出问题

1 个答案: