Center an Image Horizontally Using CSS

  <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 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 Vertical and Horizontal

You could try using a div in your HTML like this:

<div id='dv'></div>

And using a background image like this:

#dv {
    background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
    background-position: center;
}

html,body,#dv { /* so that the #dv can fill up the page */
    width:100%;
    height:100%;
}

Fiddle

How to center an image horizontally and align it to the bottom of the container?

.image_block    {
    width: 175px;
    height: 175px;
    position: relative;
}

.image_block a  {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}

.image_block img    {
/*  nothing specific  */
}

explanation: an element positioned absolutely will be relative to the closest parent which has a non-static positioning. i'm assuming you're happy with how your .image_block displays, so we can leave the relative positioning there.

as such, the <a> element will be positioned relative to the .image_block, which will give us the bottom alignment. then, we text-align: center the <a> element, and give it a 100% width so that it is the size of .image_block.

the <img> within <a> will then center appropriately.

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.

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.

Center ul (images) horizontally

You could set text-align:center on the parent, .container, and then remove width:100% and float:left on #social_media, and change display: block to display:inline-block.

jsFiddle example

.container {
    margin: auto;
    max-width: 700px;
    width: 700px;
    text-align: center;
}

#social_media {
    display:inline-block;
}

---

Related Topics