4

我当然不想添加到一堆垂直对齐 CSS 问题中，但我花了几个小时试图找到一个无济于事的解决方案。情况如下：

我正在构建一个幻灯片图片库。我希望图像显示的大小与用户窗口允许的一样大。所以我有这个外部占位符：

<section class="photo full">

（是的，我使用的是 HTML5 元素）。它具有以下 CSS：

section.photo.full { 
    display:inline-block;
    width:100%; 
    height:100%; 
    position:absolute;
    overflow:hidden; 
    text-align:center;
}

接下来，将图像放置在其中。根据图像的方向，我将宽度或高度设置为 75%，并将另一个轴设置为自动：

$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?>
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/>

所以，我们有一个流体外部容器，内部有一个流体图像。图像的水平居中工作，但我似乎无法找到将图像垂直居中于其容器内的方法。我研究过居中方法，但大多数都假设容器或图像具有已知的宽度或高度。然后是 display:table-cell 方法，它似乎对我也不起作用。

我被困住了。我正在寻找 CSS 解决方案，但也对 js 解决方案持开放态度。

4

3 回答 3

8

这很好用：

section.photo.full {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
}

section.photo.full a {
  outline: 0;
  display: table-cell;
  vertical-align: middle;
}

section.photo.full img {
  margin-top: 0;
}

我猜 display table-cell 对你不起作用，因为它的父容器没有显示为表格。

这是 jsfiddle 中的演示：

http://jsfiddle.net/duopixel/5wzPS/

于 2011-02-06T00:00:12.660 回答
1

也许这对你有用（div是包裹在你的图像周围的 div）：

div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

运行示例。

于 2011-02-05T23:32:22.853 回答
1

让我们跳过所有的表格废话！:)

<div>
    <img src="https://placehold.it/1000x1000">
</div>

div {
    position: relative;
}

img {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

Example: https://jsfiddle.net/te29m9fv/1/

于 2016-04-06T21:40:58.817 回答