mobile - 如何在移动网页上垂直对齐 Logo

Question

我正在尝试垂直对齐即将推出的 Logo ，但运气不好。

我的代码如下。

html        {width:100%;height:100%;background:url(images/bg.jpg) repeat #a3a4a6;}
body        {width:100%;height:100%;margin:auto;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#423932;overflow:hidden}
#container  {width:100%;height:100%;margin:auto;background:url(images/top_bg.jpg) no-repeat top center;vertical-align:middle;}
#logo       {margin:auto;background:url(images/logo.png) no-repeat top center; line-height:50px;}

如有任何反馈，我们将不胜感激。

Answer 1

给你的 #logo 一个 height 我认为它应该做你想要的......如果我理解你的代码。

示例: http://jsfiddle.net/jasongennaro/whxVY/1/

编辑

根据您的意见

i want it to appear vertically aligned - middle of the page.

在这种情况下，请执行以下操作:

1. 给你的 #logo div height:100% 和

2. 将background-image定位为center center

   #logo {
       margin: auto;
       background: url(images/logo.png) no-repeat center center;
       height: 100%;
   }