垂直對齊css不工作，即使與行高指定

我想垂直居中使用vertical-align：middle;但我似乎無法得到垂直對齊的效果。我已經設置了線條高度和高度，但沒有任何效果。垂直對齊css不工作，即使與行高指定

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

這整個容器是模態的內部。

讓我知道你是否需要更多信息。謝謝！

來源

2012-06-11 Nick Bergseng

這可能會幫助你：[我如何可以垂直居中文本動態高div]（http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text- in-a-dynamic-high-div） –

@ dop-trois不幸的是，我沒有圖像的高度。這就是我爲什麼要射門的原因。 –

這不是好事，它是scss。而你的代碼工作。看我的例子：jsfiddle

你能解釋一下問題出在哪？並顯示您的HTML

來源

2012-06-11 19:07:13 Xella

是啊，這就是爲什麼它很混亂......它似乎我有我需要的一切，但改變垂直對齊到基線或中間不做任何事情，img留在它的容器頂部。添加html。 –

這很奇怪。我有一切正常。也許在代碼錯誤的另一部分的某處？ http://jsfiddle.net/XTUdn/2/ – Xella

是的。它在FF和Webkit中都被破壞了，所以不是這樣。父節點可能會突破line-height/vertical-align？ –

垂直對齊css不工作，即使與行高指定

回答

相關問題