Centering image with CSS

Question

I'm trying to simply center an image with CSS with some sort of resize mechanism, but I just don't get it. It's always left aligned.

Help would be appreciated.

Here is the code:

<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>

Could it be something on the master page interfering?

<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>

Excellent! That did it. :) Is there any way I can resize it's height when the user resizes the browser? I mean, keep the image size always with 80% of the broser height?

can't you put the parent element with `text-align: center;`? — CIRCLE, Oct 10 '13 at 15:29
Can you create a fiddle recreating this error? I am not seeing it, based on the CSS you provided: http://jsfiddle.net/q5WUn/ — kunalbhat, Oct 10 '13 at 15:32
And as @circle73 pointed out, here is an updated version where the parent container simply has `text-align: center` applied to it: http://jsfiddle.net/q5WUn/1/ — kunalbhat, Oct 10 '13 at 15:35

score 0 · Accepted Answer · answered Oct 10 '13 at 15:35

0

As you can see HERE there is nothing wrong with your code. Probably you have other element's css interfiring with the image css.

Try this and see if it works:

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

answered Oct 10 '13 at 15:35

CIRCLE

4,501
5
37
56

No, that didn't do it.. :( Could be something on the master page? – Tiago Oct 10 '13 at 15:50
try adding `padding:0 auto;` – CIRCLE Oct 10 '13 at 15:53
padding:0 auto; didn't work either. I posted the master page code in the question above. – Tiago Oct 10 '13 at 15:55
é mais fácil assim.. estive a ler o teu código total e não encontrei a área onde estás a inserir a imagem com a classe img – CIRCLE Oct 10 '13 at 15:58
@Tiago caso seja esta `` vais ter de a colocar dentro de uma `div.container` ou então adicionares `text-align: center;` à tua tag `body` tipo assim `body{ text-align: center; }` – CIRCLE Oct 10 '13 at 16:03

Centering image with CSS

1 Answers1