title: How to Center an Image
body: <p>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.</p>
  
  <p>Please advise!</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;img src="/img/additional/map.png"/&gt;
          &lt;/div&gt;            
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ExLCj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ExLCj.png" alt="enter image description here"></a></p>
  
  <p>EDIT 1:</p>
  
  <p>I've found on <a href="http://getbootstrap.com/css/#images" rel="nofollow noreferrer">http://getbootstrap.com/css/#images</a> the following information</p>
  
  <p>Responsive images</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>SVG images and IE 8-10</p>
  
  <p>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.</p>
  
  <pre><code>&lt;img src="..." class="img-responsive" alt="Responsive image"&gt;
  </code></pre>