I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script: $(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/ repositionCenteredImage(); });
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
This solution is for all size images In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div> You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
