使用CSS定位圖像

我試圖簡單地用CSS調整一個圖像的中心大小調整機制，但我只是不明白。它總是左對齊。使用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％？

來源

2013-10-10 Tiago

不能把你用'文本對齊父元素：中心;'？ – CIRCLE

你可以創建一個重新創建這個錯誤的小提琴嗎？我沒有看到它，基於你提供的CSS：http://jsfiddle.net/q5WUn/ – kunalbhat

而@ circle73指出，這是一個更新的版本，其中父容器只是應用了'text-align：center'它：http://jsfiddle.net/q5WUn/1/ – kunalbhat

正如你所見，HERE你的代碼沒有問題。可能你有其他元素的CSS與圖像CSS相互交叉。

試試這個，看看它是否工作：

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

來源

2013-10-10 15:35:05 CIRCLE

不，這沒有做到。:( 可能是在母版頁上的東西？ – Tiago

嘗試添加'padding：0 auto;' – CIRCLE

填充： 0 auto; did not work。我在上面的問題中發佈了主頁代碼。 – Tiago

使用CSS定位圖像

回答

相關問題