CODEWITHSUNDEEP
asp.netcss
jackncoke
jackncoke

Reputation: 2020

Centering a Logo across multiple resolutions

I have a logo that i am trying to center on a page. Dead center from left to right. The problem that i have been facing is when i view it on different monitor sizes/resolutions it never lines up to be centered. I get it right on one resolution/size and then when i go to work on my smaller monitor it doesn't line up. Does this need to be accomplished with multiple stylesheets or a dynamic theme? I am coding the site in ASP.NET and have themes set up. This can be changed if needed. 

<body>
<div class="wrap_1">
    <form id="form1"  runat="server">
    <!-- LOGO WRAP STARTS HERE-->

        <asp:Image SkinID="DefaultLogo" runat="server"/>

  <div style="background-color: #c5e8ea;"  >
  <!-- TITLE WRAP STARTS HERE-->
    <div class="wrap">
<div>
    <h1 style="padding-left:2em;">BLAH BLAH BLAH </h1>
    <h2 style="padding-left:5em;">BLAH BLAH BLAH </h2>
    <div>
 <!--CONTROLS -->
 <ul id="home-menu">
    <li>
        <asp:Button SkinID="Button1" runat="server" PostBackUrl="~/Reinstall.aspx"/>
    </li>
    <li>
        <asp:Button SkinID="Button2" runat="server" PostBackUrl="~/Registration.aspx" />
    </li>
</ul>


    </div>
  </div>
  </div>
  </div>
    </form>

CSS

.DefaultLogo {
     margin: auto auto;
}

.wrap_1 {
    margin: 0 auto;
}

.wrap {
    margin: auto auto;
}

Upvotes: 0

Views: 251

Answers (3)

nyxthulhu
nyxthulhu

Reputation: 9752

You can give your image a ID or class and set that in css or just set the style inline to 

<img src="blah" style="margin: auto auto;"/>

or in CSS 

<img src="blah" name="moo"/>

#blah { 
    margin: auto auto;
}

or in CSS using classes

<img src="blah" class="moo"/>

.blah { 
   margin: auto auto;
}

I have also noticed your using SkinID in your contorls, I don't think it does what you think it does. It sets what Skin should be used on the control so instead of 

<asp:Image SkinID="DefaultLogo" runat="server"/>

try 

<asp:Image runat="server" CssClass="moo"/>

and have you CSS Set to

.blah { 
   margin: auto auto;
}

Upvotes: 0

DOCbrand
DOCbrand

Reputation: 339

If the width of your image is always going to be a certain width, let's say 300px, then you can apply this css to it:

#Logo {
    width: 300px;
    height: 110px;
    position: relative;
    left: 50%;
    margin-left: -150px;
}

I would try to go with the "margin: 0 auto" choice though.

Upvotes: 1

Konrad Viltersten
Konrad Viltersten

Reputation: 39118

You should be able to achieve that using CSS only.

#theCoolestLogoEver{
  margin: auto auto;
}

Upvotes: 1

Related Questions