Question

我试图简单地使用CSS调整图像中心，并使用某种调整大小机制，但我只是没有得到它。它始终保持一致。

帮助将不胜感激。

以下是代码：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <style type="text/css">
    .img {
        display: block;
        margin:0 auto;
        max-width: 900px;
        top:10px;
        width: 60%;
        height: 70%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <img class="img" src="gP.png" alt="..." />
</asp:Content>

这可能是母版干扰了吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>
    <!-- Syntax hl -->
    <script src="http://www.gcmingati.net/wordpress/wp-content/themes/giancarlo-mingati/js/jquery-syntax/jquery.syntax.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="li-scroller.css" type="text/css" media="screen" /> 
    <script type="text/javascript">
        $(function () {
            $("ul#ticker01").liScroll();
        });
    </script>    
    <style type="text/css">    
    body, html { margin: 0; padding: 0; }
    img { position:absolute; z-index:-1; width:100%; height:100% }
    #divMenu {
        position: absolute;
        left: 50%;
        top: 80%;
        text-align: center;
        width:900px;
        height:27px;
        margin-left: -450px; /*half width*/
        margin-top: -50px; /*half height*/
        }
    #divNews {
        position: absolute;
        left: 50%;
        top: 85%;
        text-align: center;
        width:900px;
        height:auto;
        margin-left: -450px; /*half width*/
        margin-top: -50px; /*half height*/
        }
    a:link {color:White; font-family:"Verdana"; text-decoration:none; font-size:10px; font-weight:bold; }    /* unvisited link */
    a:visited {color:White; font-family:"Verdana"; text-decoration:none; font-size:10px; font-weight:bold; } /* visited link */
    a:hover {
        color:yellow;
        font-family:"Verdana";
        text-decoration:none;
        font-weight:bold; 
        font-size:10px;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
        transition: 0.5s;
    }   /* mouse over link */
    a:active {color:White; font-family:"Verdana"; text-decoration:none; font-size:10px; font-weight:bold; }  /* selected link */
    </style>    
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <img src= "gP2.jpg" alt="" />
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
        <div runat="server" id="divMenu" style="background-image: url('pFDiv.png');">
            <asp:HyperLink ID="Grifagem" runat="server" Text="Grifagem JP"
            NavigateUrl="~/index.aspx"></asp:HyperLink>
            &nbsp;
            &nbsp;
            <asp:LinkButton ID="Serviços" runat="server" Text="Serviços"></asp:LinkButton>
            &nbsp;
            &nbsp;
            <asp:LinkButton ID="Portfolio" runat="server" Text="Portfolio"></asp:LinkButton>
            &nbsp;
            &nbsp;
            <asp:LinkButton ID="Loja" runat="server" Text="Loja"></asp:LinkButton>
            &nbsp;
            &nbsp;
            <asp:LinkButton ID="SobreNos" runat="server" Text="Sobre Nós"></asp:LinkButton>
            &nbsp;
            &nbsp;
            <asp:LinkButton ID="Contactos" runat="server" Text="Contactos"></asp:LinkButton>
            &nbsp;
            &nbsp;
            <asp:LinkButton ID="AreaReservada" runat="server" Text="Área Reservada"></asp:LinkButton>
        </div>
        <div runat="server" id="divNews">
            <ul id="ticker01">
                <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
                <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
                <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
                <!-- eccetera -->
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

出色！这样做了。 :)当用户调整浏览器大小时，有什么办法可以调整它的高度吗？我的意思是，保持图像大小始终为更高的高度的80％？

Answer 1

正如您所看到的HERE，您的代码没有任何问题。可能你有其他元素的css与图像css交火。

试试这个，看它是否有效：

.img {
        display: block;
        margin:0 auto !important;
        max-width: 900px;
        top:10px;
        width: 60%;
        height: 70%;
}

使用CSS居中图像

1 个答案: