Question

我正在尝试使用vertical-align：middle垂直居中图像;但我似乎无法得到垂直对齐以产生任何效果。我已经设置了行高和高度，但没有任何效果。

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

整个容器都在一个模态中。

如果您需要更多信息，请与我们联系。谢谢！

Answer 1

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

你能解释一下这个问题吗？并显示您的HTML

即使指定了行高，vertical-align css也无法正常工作

1 个答案: