獲取2張垂直對齊的圖像

Question

我想垂直對齊兩個圖像（高度不同但寬度相同），並使它們都適合屏幕。 我可以將它們放在不同的div中。 是否居中。 沒關系 （他們必須適合屏幕）

我已經在這里閱讀了有關此問題的一些文章，但沒有成功。

我會用CSS解決這個問題，但是我也可以使用javascript或jquery。

任何幫助將不勝感激。

樣本圖像（工程圖圖像和藍色帶底）： 樣本圖片

這里的代碼：

<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

屬性vertical-align不適用於min-height 。 它可以與height或padding一起使用 。

獲取2張垂直對齊的圖像

問題描述

1 個解決方案

解決方案1
0 2013-10-23 15:23:42

獲取2張垂直對齊的圖像

問題描述

1 個解決方案

解決方案1 0 2013-10-23 15:23:42

解決方案1
0 2013-10-23 15:23:42