图像在 Windows 7 上移至左侧答案

【问题标题】：Images moved to left on Windows 7图像在 Windows 7 上移至左侧
【发布时间】：2017-01-25 05:59:55
【问题描述】：

最近，我公司迁移到Windows 7操作系统。

我在我的 Windows XP 机器上使用 Visual Studio 2010 中的以下主文件并且一切正常，现在我将以下代码迁移到 Windows 7 和相同的 Visual Studio 2010，下面的所有图像都移到了左侧。我可以调整它们，但我很好奇为什么所有图像都向左移动，我使用的是同一个显示器，Visual Studio 2010 版本是一样的。

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Login.master.cs" Inherits="Masters_Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../App_Themes/NG/style.css" rel="Stylesheet" type="text/css" />
   <style type="text/css">   
          div ,
           div img { display:block } 
            .fl  
              {
                  float:left; 
                  margin-left:15%;
                  background-color:#8e2826;
                  width:68.1%;
                  margin-right:18%;
                  text-align:center;
              }

              .f2
              {
                  float:left; 
                  margin-left:15%;
                  background-color:#e5e0dd;
                  width:68.1%;
                  margin-right:18%;
                  text-align:center;


              }
              .f3
              {
                    float:left; 
                  margin-left:15%;
                  background-color:#d4cfcd;
                  width:68.1%;
                  margin-right:18%;
                  text-align:center;




              }

                .style1
        {
            color: #8e2826;
        }

      </style> 
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body >
    <form id="form1" runat="server" >



           <div style="margin-left:15%; background-color:#343434; width: 68.1%; margin-right:18%; ">  

                     <asp:Image ID="imgIS" ImageUrl="~/images/improved_LOGO.jpg" runat="server" />




        </div>

         <div class="fl" >


         <asp:Image ID="imgTop" runat="server" ImageUrl="~/images/m_banner_top.jpg" />

         </div>

  <div class="f2">
   <asp:Image ID="Image2" runat="server" ImageUrl="~/images/m_banner_btm_5.jpg" />


  </div>

  <div class="f3" ></div>


    <div class="f3">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>



            <div style="margin-left:15%; margin-right:18%; width: 68.1%; background-color:#8e2826; text-align:center">

             <asp:Image ID="banner" runat="server" ImageUrl="~/images/b_banner_calibri.jpg"/>





       </div>

    </form>
</body>
</html>

【问题讨论】：

您在.fl 和.f2 中设置了float:left;，两者都设置为包含图像的divs。您的DOCTYPE 似乎也不完整：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
这是一个原因，因为我反对使用 ASP.net 和 Visual Studio - 不懂 HTML 的人会在不遵循任何标准的情况下“编码”。不是人身攻击。
如果你想将它们对齐到页面的中心，你必须在你的 CSS 中指定：

标签： asp.net html css

【解决方案1】：

如果要将它们与页面中心对齐，请在 CSS 中添加以下行：

width://fixed width;
margin-left: auto;
margin-right:auto;

【讨论】：