即使指定了行高，垂直对齐 css 也不起作用答案

【问题标题】：vertical-align css not working even with line-height specified即使指定了行高，垂直对齐 css 也不起作用
【发布时间】：2012-06-12 03:26:02
【问题描述】：

我正在尝试使用 vertical-align: middle; 使图像垂直居中。但我似乎根本无法让垂直对齐产生任何效果。我已经设置了line-height和height，但是没有任何效果。

SASS：

.lot-images {
  position: relative;
  float: left;
  min-height: 300px;
  *height: expression(this.scrollHeight < 300 ? "300px" : "auto");
  padding-right: 65px;
 .viewer-wrapper {
    height: 415px;
    width: 450px;
    line-height: 415px;
    position: relative;

    .main {
    position: relative;
    display: block;
    text-align: center;
    height: 415px;
    line-height: 415px;
    width: 100%;
    max-width: 450px;
    max-height: 415px;
    font-size: 0;
    cursor: pointer;
    &.small {
      img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
        vertical-align: middle;
      }
    }
  }
}

HAML：

.lot-images
  %div.viewer-wrapper
    .facebook
    %a.pinterest{ :href => '#', :target => '_pinterest' }
    .main.small
      %img
    %div.gallery-pager.prev.hide
      %i
    %div.gallery-pager.next.hide
      %i
.thumbnails

整个容器位于模态框内。

如果您需要更多信息，请告诉我。谢谢！

【问题讨论】：

这可能对你有帮助：how can i vertically center text in a dynamically high div
@dop-trois 不幸的是我没有图像的高度。这就是我为 valign 拍摄的原因。

标签： css sass vertical-alignment

【解决方案1】：

这不是 sass，这是 scss。你的代码有效。看我的例子：jsfiddle

你能解释更多问题是什么吗？并显示你的 html

【讨论】：

是的，这就是它如此令人困惑的原因......似乎我拥有我需要的一切，但是将垂直对齐更改为基线或中间没有任何作用，img 停留在其容器的顶部。添加html。
这很奇怪。我一切正常。也许在代码错误的另一部分的某个地方？ jsfiddle.net/XTUdn/2
没错。它在 FF 和 Webkit 中都被破坏了，所以不是这样。父节点会破坏行高/垂直对齐吗？