0

I'm trying to vertically center an image using vertical-align: middle; but I can't seem to get vertical-align to have any effect at all. I've set the line-height and height, but nothing has an effect.

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

This whole container is inside a modal.

Let me know if you need more info. Thanks!

Nick Bergseng
  • 193
  • 1
  • 2
  • 7
  • This may help you: [how can i vertically center text in a dynamically high div](http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div) – doptrois Jun 11 '12 at 20:06
  • @dop-trois Unfortunately I don't have the height of the images. That's why I was shooting for valign. – Nick Bergseng Jun 11 '12 at 22:57

1 Answers1

0

It's not sass, it's scss. And your code works. Look my example: jsfiddle

Can you explain more what's the problem? And show your html

Community
  • 1
  • 1
Xella
  • 1,283
  • 10
  • 10
  • Yah this is why it's so confusing... it seems like I have everything I need for it, but changing the vertical-align to baseline or middle doesn't do anything, the img stays in the top of its container. Adding the html. – Nick Bergseng Jun 11 '12 at 19:20
  • This is very strange. I have everything works fine. Maybe somewhere in another part of the code error? http://jsfiddle.net/XTUdn/2/ – Xella Jun 11 '12 at 19:52
  • Yah exactly. It's broken in both FF and Webkit so that's not it. Could a parent node break line-height/vertical-align? – Nick Bergseng Jun 11 '12 at 19:57