How to Center an Image

2
votes

Currently I have an image saved in my project of a map that I would like to include in my solution, my first website. I'm very new to ASP.NET and CSS but have some HTML experience. I am having trouble figuring out how to center and stretch the image appropriately so that regardless of the size of the browser window, the center of the map always remains centered accordingly.

Please advise!

<section>
    <div class="container-fluid">
        <div class="row">
            <img src="/img/additional/map.png"/>
        </div>            
    </div>
</section>

enter image description here

EDIT 1:

I've found on http://getbootstrap.com/css/#images the following information

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

<img src="..." class="img-responsive" alt="Responsive image">
5
htmlcss
Add text-align: center; or margin: 0 auto on image - Tushar
Are you using bootstrap? - Roli Agrawal
Yes, a free bootstrap template downloaded actually. - Matthew
use class text-center along with row. - vivekkupadhyay
You can use Center-block class as well. - Vinayak

5 Answers

2
votes

Just simply add center tag to the image.

<section>
   <div class="container-fluid">
      <div class="row">
         <center>
            <img src="/img/additional/map.png"/>
         </center>
      </div>            
  </div>
</section>
1
votes

Added class="img-responsive center-block" according to http://getbootstrap.com/css/#images .

<section>
    <div class="row">
        <img class="img-responsive center-block" src="/img/additional/map.png"/>
    </div>
</section>
1
votes

You could also use pure CSS, for example:

.

center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
0
votes

add class center-block Ref : here

e.g : <img class="center-block" src="/img/additional/map.png"/>

0
votes

If are you using bootstrap, you can do it:

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>