CODEWITHSUNDEEP
htmlcssimage
CeccoCQ
CeccoCQ

Reputation: 3754

How to center image in a div horizontally and vertically

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:

enter image description here

But I wanted to get this result:

enter image description here

How can I center this image horizontally and vertically?

Upvotes: 16

Views: 84174

Answers (7)

Jignesh Vaghela
Jignesh Vaghela

Reputation: 29

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%;
}

Upvotes: 1

Chintan Mathukiya
Chintan Mathukiya

Reputation: 393

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

Upvotes: 0

talha2k
talha2k

Reputation: 25650

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>

Upvotes: 14

Boro Brumen
Boro Brumen

Reputation: 1

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:

http://brumenlab.com

Upvotes: 0

srini
srini

Reputation: 884

using margin-top

example css

 #id_immagine{
  margin:0 auto;
   }

Upvotes: -1

Key-Six
Key-Six

Reputation: 2469

Try something like this:

<div style="display:table-cell; vertical-align:middle">
 "your content"
</div>

Upvotes: -1

David Yell
David Yell

Reputation: 11855

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>

Upvotes: 6

Related Questions