1

I been trying to center a div element inside another div. The div element has an image in it but all the images have different heights. I was able to center them horizontally but vertically is the challenge. I tried transform: translateY(-50%);, but the images spill over to the top div, which is a the menu on top. Here is HTML looks

<div class="main_menu">
...
</div>
<div class="container">
    <div class="current_photo">
        <a href="http://someurl" target=_blank">
            <div class="image-motion">
                <img src="./somefile.jpg" class="center_image">
            </div>
        </a>
    </div>
</div

And here is the CSS

.container {
    display : block;     
    position:relative;
    float: left;
    padding : 10px;
    width : 200px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;   
}

.current_photo {
    position: relative; 
    width: 100%;
    width : 290px;
    height: 210px;
    z-index : 0;
    margin-left: auto;
    margin-right: auto;
    resize: vertical;
}

.image-motion {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.image-motion img {
    max-width: 250px;
}

.image-motion img:hover {
    transform:scale(1.2);
}

img.center_image{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
Criatura Eterna
  • 273
  • 1
  • 3
  • 16
  • possible duplicate http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally , just make the hosting div `position: relative` –  May 12 '15 at 16:39
  • I really hate to nitpick, especially because it's probably not this way in your actual code, but your css selector is `.curent_photo` while your html has `class="current_photo"` – mayacoda May 12 '15 at 16:46
  • Thank you @MayaNedeljkovich, it was a typo – Criatura Eterna May 12 '15 at 16:48
  • Is `image-motion` _"div element inside another div"_ ? If yes, parent appear to be `a` element ? – guest271314 May 12 '15 at 16:52

1 Answers1

1

You could try changing the display of your .container to table:

.container {
    display: table;
}

.current_photo {
    display: table-cell;
    vertical-align: middle;
}

https://css-tricks.com/centering-in-the-unknown/

mayacoda
  • 170
  • 1
  • 10