Here are some usefull techniques and guidance of CSS and one HTML code for Absolute Center (Vertical & Horizontal) An Image.
Caution:
The problem here is that if you will re-size the browser you cannot scroll to the top. For example: if you have a menu on top you cant view it.
CSS background-image Technique:
html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
Table technique:
***---CSS----***
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
***---HTML---***
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="logo.png" alt="" /></td>
</tr>
</table>
</body>
</html>
CSS + Inline Image Technique:
img {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
It is also possible to do this using div’s and CSS:
<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; display: table">
<div class="contendor-secundario" style="border: 1px solid yellow; margin: 0; padding: 0; display: table-row">
<div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; vertical-align: middle; display: table-cell">columna uno</div>
<div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; display: table-cell">column two,
which is quite higher than the previous one,
also, we can make even higher
and column 1 is no longer centered
</div>
</div>
</div>
0 comments:
Post a Comment