0

ある種のサイズ変更メカニズムを使用して 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% に保つということですか?

4

1 に答える 1

0

HEREでわかるように、コードに問題はありません。おそらく、他の要素の css が画像の css と干渉している可能性があります。

これを試して、動作するかどうかを確認してください： 

.img {
        display: block;
        margin:0 auto !important;
        max-width: 900px;
        top:10px;
        width: 60%;
        height: 70%;
}
于 2013-10-10T15:35:05.050 に答える