Центрирование изображения с помощью 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 cs другого элемента с изображением 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

padding: 0 auto, также не работал. Я разместил код главной страницы в вопросе выше. – Tiago

Центрирование изображения с помощью CSS

ответ

Смежные вопросы