Center Image in Div Horizontally

How to center image horizontally within a div element?

#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.

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;

or

/* 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 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>

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.

How to center an image in the middle of a div?

Simple and easy method to do this,

.test {

  background-color: orange;

  width: 700px;

  height: 700px;

  display:flex;

  align-items:center;

  justify-content:center;

}

<div class="test">

<img src="http://via.placeholder.com/350x150">

</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>

Trying to horizontally align and center an image next to a div

It's always the same trick for vertically centering elements in other elements.
take a look here.

You need to create an empty span before the element you want to center.
this empty span will be called the Centerer.
give the Centerer display:inline-block; height:100%; vertical-align:middle;
and for the element you want to center, give display:inline-block; vertical-align:middle;

It's as simple as that.

Edit:
This method don't make you specify any static width (px, or even %).
so your layout stays very flexible.

now that you can verticaly align anything within everything..
you can create a simple layout that will achive your header problem.

Edit 2

I've created your layout for you.
as you can see.. its a very simple one (I'm using the vertical alignment trick).
http://jsfiddle.net/avrahamcool/N5Q2W/2/
now take this basic layout, and aplly your css to it.

How to center image in a div 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>

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

---

Related Topics