CODEWITHSUNDEEP
cssvertical-alignment
Federico
Federico

Reputation: 1422

vertical-align: middle / 2 images

I'm struggling trying to find a way to vertically align two images on two different columns but I don't know how to do it.

Here the css of the two columns:

.left {
width: 50%;
height: 100%;
float: left;
text-align: center;
}

.right {
width: 50%;
height: 100%;
float: left;
text-align: center;
}

http://jsfiddle.net/6o6zwqLb/

I guess it should be pretty simple.

Upvotes: 1

Views: 5184

Answers (3)

Christina
Christina

Reputation: 34652

DEMO: http://jsfiddle.net/j55dxbe3/

I would use inline-block and make sure that my inline-block elements have no gap in the html (I used a comment to do this rather than making the font-size:0px on the parent and then putting a font size on the children).

enter image description here

HTML

<div id="center">

    <div class="left">
    <img src="http://placekitten.com/g/250/375" width="250" height="375" />
    </div><!-- comment to close gap
    --><div class="right">
    <img src="http://placekitten.com/g/333/500" width="333" height="500" />
    </div>

</div>

CSS:

.left, .right {
  width: 50%;
  height: 100%;
  display:inline-block;
  text-align: center;
  vertical-align:middle;
}

Upvotes: 2

Charly
Charly

Reputation: 160

.left > img {
    margin-top: 62px;
}

A margin-top of 62px on the smaller image will move it down where it is (about) 62px to the bottom of the page. Demo

Upvotes: 0

isherwood
isherwood

Reputation: 61079

Displaying your elements as table cells should cure what ails you:

#center {
    ...
    display: table;
}
#center > div {
    display: table-cell;
    vertical-align: middle;
}

Demo

Upvotes: 1

Related Questions