如何在移动网页上垂直对齐徽标

Question

我试图垂直对齐即将推出的徽标，但没有任何运气。

我的代码如下。

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/

修改

根据你的评论

  

我希望它显示为垂直对齐 - 页面中间。

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

1. 将#logo div height:100%和
提供给您

2. 将background-image定位为center center

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