how to position img tag at right centre?

Question

 <div >
        <img  src="some url"  />
 </div>

The div height and width keeps varying. I would like to place this img in align to right and placed at center vertically. height and width of the image is fixed . How to solve it dynamically? like sometimes the div's width and height is same as img's width and height. or div's width and height is greater than img's width and height...

http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div — rejo, Jan 14 '13 at 11:09

score 2 · Answer 1 · answered Jan 14 '13 at 11:15

2

Try this code in your css,

    float:right;
    margin-top:25%;

You can see here complete code and example. http://jsfiddle.net/VzLjq/

Good Luck !

answered Jan 14 '13 at 11:15

Venkat

316
1
13

The problem i am facing is that height of the div varies, and i am trying to get the image in center vertically. yes , when given margin-top as 25%, it will come down and place itself 25% less than top. but how to handle bottom ? – JackAss Jan 14 '13 at 11:20

score 0 · Answer 2 · answered Jan 14 '13 at 11:10

0

Try this i think it should help you in this case:

div{
  position: relative;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
}

answered Jan 14 '13 at 11:10

Панайот Толев

6,597
5
19
28

score 0 · Answer 3 · answered Jan 14 '13 at 11:17

Try to use css.

#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;}
#content img.alignright {float:right; margin:5px 0 5px 15px;}
#content img.aligncenter {display:block; margin:10px auto;}
#content img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

and your html

<img class="alignright" src="img/test.jpg" height="225" width="300"
alt="Example content image using the class .alignright" />

try to use these css templates as per your requirements.

score 0 · Answer 4 · answered Jan 14 '13 at 11:23

You can use display:table for this. Write like this:

HTML

<div class="parent">
  <div class="child">
    <img  src="http://dummyimage.com/200x200/000/fff&text=image"  />
  </div>
</div>

CSS

.parent{
  height:400px;
  border:1px solid red;
  text-align:right;
  display:table;
  width:100%;
}
.parent .child{
  display:table-cell;
  vertical-align:middle;
  width:100%;
  height:100%;
}

Check this http://jsfiddle.net/qEYuD/

It's work till IE8 & above.

score 0 · Answer 5 · answered Jan 14 '13 at 13:52

If your image is static, you can use relative positioning and negative margins:

http://jsfiddle.net/qEYuD/3/

.parent{
  height:400px;
  border:1px solid red;
  text-align: right;
}

.parent img {
  position: relative;
  top: 50%;
  margin-top: -100px; /* half the height of the image */
}

If both your image and container have unknown dimensions, Flexbox can do it with a minimal amount of markup:

http://jsfiddle.net/qEYuD/4/ (prefixes not included)

.parent{
  height:400px;
  border:1px solid red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

The down side of Flexbox is that browser support isn't quite there yet. IE10 is the first IE version to support it, and Firefox is just now updating their support to follow the current specification.

how to position img tag at right centre?

5 Answers5