Center Image Horizontally Within a Div

Center image horizontally within a div

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;      /* Equals maximum image height */    width: 160px;    border: 1px solid red;    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center;    margin: 1em 0;}
.helper {    display: inline-block;    height: 100%;    vertical-align: middle;}
img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}

<div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

How to align an image horizontally center within a div?

apply style text-align:center to div as:

  <div class="col-sm-12 col-md-12">     <div class="answer-picture col-xs-12" id="bookListDiv">           <div id="loadme" style="display:block; margin:0 auto;text-align:center">                <img src="~/images/loader.gif"/>          </div>      </div>  </div>

Center image inside div horizontally

Center using transform - one of the ways you can center a positioned element. Add these styles to clickexpander:

left: 50%;
transform: translateX(-50%);

See demo below:

/* Animation */$(document).ready(function() {  $('.text').hide();  $('.expander').click(function() {    $(this).parent().next().slideToggle(200);  });  $('.text').slideUp(200);});
/* Change image */$(function() {  $('.expander').click(function() {    $(this).children('img').each(function() {      $(this).toggle(0);    });  });});

.red {  background-color: #cc1042;}.whitetext {  color: #ffffff;}.lefttext {  text-align: left;}.centertext {  text-align: center;}.righttext {  text-align: right;}.littpadding {  padding: 15px 15px 15px 15px;}.paddingned80 {  padding-bottom: 80px;}.close {  opacity: 1!important;}.close:focus,.close:hover {  opacity: 1!important;}.clickexpander {  position: absolute;  bottom: 10px;  left: 50%;  transform: translateX(-50%);}.clickexpander img {  max-width: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 luft whitetext centertext whitelink">  <div class="littpadding paddingned80 red">    <h2>Sesong</h2>    <h3>990,- pr år</h3>    <a href="#/" title="Prisliste" data-target="#">      <div class="expander clickexpander">        <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">        <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">      </div>    </a>
    <div style="display:none;">      <div class="row">        <div class="col-md-12 littluft lefttext luftopp">          <p>            Befaring av hytte/fritidshus og befaringsrapport 2 ganger årlig          </p>        </div>      </div>    </div>  </div></div>

Center image in div horizontally

Every solution posted here assumes that you know the dimensions of your img, which is not a common scenario. Also, planting the dimensions into the solution is painful.

Simply set:

/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;

/* for the img inside your div */
display: block;
margin: 0 auto;

That's all.

Note, that you'll also have to set an initial min-width for your outer div.

How can i align an image next to a div horizontally

Remove the height on the second box, also vertical-align should be set to middle like you did to the img, not center

.second-div {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
}

When you set a height to the second box, while the box is aligned to the image since they have the same height, but the content inside of the box is not vertically aligned.

Center align image in a div

I'm not sure about why your current code have default text-align: left for div element.

But please try this one: http://jsfiddle.net/18230pwa/

div img {
    display : block;
    margin : auto;
}

div {
    text-align: left;
}

How to center image vertically in div

I use this css snippet:

.selector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/

Center Image Horizontally Within a Div