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>
<asp:LinkButton ID="Serviços" runat="server" Text="Serviços"></asp:LinkButton>
<asp:LinkButton ID="Portfolio" runat="server" Text="Portfolio"></asp:LinkButton>
<asp:LinkButton ID="Loja" runat="server" Text="Loja"></asp:LinkButton>
<asp:LinkButton ID="SobreNos" runat="server" Text="Sobre Nós"></asp:LinkButton>
<asp:LinkButton ID="Contactos" runat="server" Text="Contactos"></asp:LinkButton>
<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?
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%;
}