Get 2 image vertically aligned

Question

I would like to vertically align two images (with different height but same width) AND get both of them fitting the screen. I could put them in different div. Centered or not. Doesn't matter. (they got to fit the screen)

I have already read some posts here about this problem, but without success.

I would solve this problem with css, but i could use javascript or jquery too.

Any help will be appreciated.

sample image ( drawing image and blue band bottom): 样本图片

here the code:

<html lang="en">
<head>
<style>

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }

  #main > article {
   background-image: url("http://frisketti.altervista.org/img/sfondo.jpg");
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

 footer {
   display: block;
   min-height: 100px;
   background: #ffeebb;
background-image: url("http://frisketti.altervista.org/img/footer.jpg");
   }


 </style>
 </head>
 <body>

<div id='main'>
    <article></article>
</div>

 <footer></footer>
  </body>
</html>

Answer 1

The property vertical-align doesn't work with min-height . It's working with height or padding .

Get 2 image vertically aligned

Question

1 answers

solution1
0 2013-10-23 15:23:42

Get 2 image vertically aligned

Question

1 answers

solution1 0 2013-10-23 15:23:42

solution1
0 2013-10-23 15:23:42