0

我有一个徽标，我试图将其置于页面中心。从左到右的死点。我一直面临的问题是，当我在不同的显示器尺寸/分辨率上查看它时，它永远不会对齐居中。我在一种分辨率/尺寸上做对了，然后当我在较小的显示器上工作时，它没有对齐。这需要通过多个样式表或动态主题来完成吗？我在 ASP.NET 中对站点进行编码并设置了主题。如果需要，可以更改此设置。

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

3 回答 3

1

您应该能够仅使用 CSS 来实现。

#theCoolestLogoEver{
  margin: auto auto;
}
于 2012-07-17T19:35:31.320 回答
1

如果图像的宽度总是一定的宽度，比如说 300px，那么你可以应用这个 css 到它：

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

不过，我会尝试使用“margin：0 auto”选项。

于 2012-07-17T20:39:50.087 回答
0

您可以给您的图像一个 ID 或类并在 css 中设置它，或者只是将样式内联设置为

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

或在 CSS

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

#blah { 
    margin: auto auto;
}

或在 CSS 中使用类

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

.blah { 
   margin: auto auto;
}

我也注意到你在你的控制中使用 SkinID，我不认为它做你认为它做的事情。它设置应该在控件上使用什么皮肤，而不是

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

尝试

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

并让你的 CSS 设置为

.blah { 
   margin: auto auto;
}
于 2012-07-17T19:39:47.100 回答