CODEWITHSUNDEEP
javascriptjqueryhtmlcssdynamic
Wilfred
Wilfred

Reputation: 809

How do I dynamically center images?

With css and javascript/jquery, how do I center the images I have displayed vertically down a page? Let me draw a diagram. This is what I have...

-------
|     |
|     |
-------
----------
|        |
|        |
----------
------
|    |
|    |
------

This is what I want

  -------
  |     |
  |     |
  -------
-----------
|         |
|         |
-----------
   -----
   |   |
   |   |
   -----

Upvotes: 3

Views: 1692

Answers (3)

Tim B James
Tim B James

Reputation: 20374

If you place each image within a <div class="img"> then set the style of those to;

div.img{ 
    margin: 0 auto;
}

*adjust the width to match your needs.

Alternative, you can set the width of the <div class="img"> to 100% and centre the text;

div.img{
    width: 100%;
    text-align: center;
}

Upvotes: 3

Starx
Starx

Reputation: 79069

A small snippet will get this done

display: inline-block;
margin: 1em auto;

Using jQuery you can set the properties like:

$("img#selector").css({
    'display':'inline-block',
    'margin' : '1em auto'
});

Upvotes: 0

Brad
Brad

Reputation: 163612

Set the following CSS on your centered image class:

display: block;
margin: 1em auto; /* the key here is auto on the left and right */

Upvotes: 4

Related Questions