0

vertical-align: middle; を使用して画像を垂直方向に中央揃えしようとしています。しかし、vertical-align の効果がまったく得られないようです。line-height と height を設定しましたが、何も効果がありません。

サス:

.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;
      }
    }
  }
}

ハムル:

.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

このコンテナ全体がモーダル内にあります。

さらに情報が必要な場合はお知らせください。ありがとう！

4

1 に答える 1

0

sassじゃなくてscssです。そして、あなたのコードは機能します。私の例を見てください：jsfiddle

何が問題なのかもっと説明できますか？そして、あなたのhtmlを表示します

于 2012-06-11T19:07:13.933 に答える