运行时网页发生变化答案

【问题标题】：Webpage changes when I run it运行时网页发生变化
【发布时间】：2012-11-14 06:24:39
【问题描述】：

我正在尝试在 Visual Studio 2010 中使用 Asp.net 和 CSS 设计一个网页。问题很简单，但我不知道如何解决它。我在我的页面中创建了一个标题，这个标题是一个 div，它链接到我的样式表以进行着色。我在 div 中放了一张图片，并添加了一个标签。现在经过一段时间将图像放在 div 中间并在其下放置文本，当我运行网站时，Label 完全离开 div 并坐在外面。我该如何解决？为了将来参考，我遵循什么技术或方法以使运行前的网页在运行后看起来总是一样的？我决定为每个页面创建一个样式表并将我所有的样式都放在那里。

对不起，在这里。

<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
<title></title>
<link href="LoginStyleSheet.css" rel="Stylesheet" type="text/css" />

</head>
 <body>
<form id="form1" runat="server">
<div class="HeaderDiv">
    <img alt="" class="Logo"  longdesc="http://localhost:17260/MECIT_Logo.png" 
        src="MECIT_Logo.png" />
        <asp:Label CssClass="Title" ID="WelcomeLabel" runat="server" Text="SSS"> 
         </asp:label>                                                                                                                                                                                                                                                                                                                                                                                                     
        </div>  
      </form>
    </body>
    </html>


 body 
 {
background-color:Gray;
 }
 .HeaderDiv
  {
background-color: #0099FF;
height: 121px;
  }
 .Logo
  {
 position:absolute;
 left:40%;
  }
  .Title
  {
 position:absolute;
 left:38%;
 bottom:83%;
 font-size:xx-large;
 font-family:Cambria;
 font-weight:bold;
 color:Navy;
 width: 336px;
 }

【问题讨论】：

请发布您的html和css
老兄，我们看不出你是怎么做到的。你希望别人如何提供帮助。
我看到你在.HeaderDiv 上的高度是固定的，你在 div 中添加的图像的高度是多少？
为什么.Title 和.Logo ID 设置为绝对位置？也许如果您将.Logo 的position 设置为position:relative; 可以帮助解决问题。
是的，您的bottom:83% 似乎正在使用屏幕底部。我同意@DomenikVanBuskirk，将您的.Title 设置为相对并重新定位它。我发现使用 % 来定位项目很痛苦。使用margin-left:auto 和margin-right:auto 是将项目集中定位到用户屏幕的更好方法。

标签： asp.net css visual-studio-2010

【解决方案1】：

我不明白你为什么要绝对定位容器内的元素，所有这些都可以通过边距和对齐来处理。这是我的建议：

Click here to view the fiddle

CSS：

 body 
 {
background-color:Gray;
 }
 .HeaderDiv
  {
background-color: #0099FF;
height: 121px;
    text-align:center;
  }
 .Logo
  {
margin:5 auto;
  }
  .Title
  {
 font-size:xx-large;
 font-family:Cambria;
 font-weight:bold;
 color:Navy;
 width: 336px;
 }

HTML：

<div class="HeaderDiv">
    <img alt="" class="Logo"  longdesc="http://localhost:17260/MECIT_Logo.png" 
    src="http://www.mecit.edu.om/images/MECIT_Logo.png" /><br />
    //Used a <span> for the Label, as I believe that is what it renders as
    <span class="Title" id="WelcomeLabel">Some Title</span>                                                                                                                                                                                                                                                                                                                                                                                                    
        </div>

【讨论】：

你太棒了……谢谢。我现在将了解有关边距的所有信息。
如果你不介意再问一个问题，我在 HeaderDiv 下添加了另一个 div，称为 FooterDiv，我在 css 文件中创建了它并添加了与 HeaderDiv 相同的属性，当我这样做时jstfiddle，它可以工作，但它在我的程序中什么也不做，保持为空，即使它基本上是 HeaderDiv 的副本。
能否请您发布您的 HTML 和 CSS 的小提琴？