CODEWITHSUNDEEP
mobilecssvertical-alignment
hawx
hawx

Reputation: 1669

How to vertically align a logo on a mobile webpage

I am trying to vertically align a coming soon logo, but not having any luck.

My code is below.

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;}

Any feedback would be appreciated.

Upvotes: 1

Views: 1342

Answers (1)

Jason Gennaro
Jason Gennaro

Reputation: 34855

Give your #logo a height and I think it should do what you want... if I understand your code.

Example: http://jsfiddle.net/jasongennaro/whxVY/1/

EDIT

As per your comment

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

In that case, do the following:

  1. give your #logo div a height:100% and

  2. position the background-image as center center

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

Upvotes: 1

Related Questions