CODEWITHSUNDEEP
htmlcss
Mohammad Fanni
Mohammad Fanni

Reputation: 4173

img vertical align in div

how can i align img in div middle without using margin-top size?

i change display to tablle-cell and vertical-align:middle but not work DEMO

<div style="
  border: 1px solid rgba(83, 87, 91, 0.67);
  float: right;
  height: 39px;
  line-height: 39px;
  width: 15%;
">



 <img style="margin:auto;
display:block;" src=http://up.tractorfc.com/images/73529783235062014043.png />
  </diV>

Upvotes: 0

Views: 170

Answers (6)

barrigaj
barrigaj

Reputation: 371

A little trick with margin: auto to center align the image.

HTML

<div>
  <img src=http://up.tractorfc.com/images/73529783235062014043.png />
</div>

CSS

div {
  position: relative;
  border: 1px solid rgba(83,87,91,0.67);
  height: 39px;
  width: 15%;
}
img {
  position: absolute;
  top:0;
  left: 0;
  right:0;
  bottom:0;
  margin: auto;
}

The trick here is the positioning of both the div and img, the top,bottom,left,right of the img, and margin:auto. Change the height and width and see how it is always in the middle

DEMO

Upvotes: 3

Rajnish
Rajnish

Reputation: 94

your query is below your code is not working:-

<div style="
border: 1px solid rgba(83, 87, 91, 0.67);
float: right;
height: 39px;
line-height: 39px;
width: 15%;
">



Just remove float left in your css attributes and just copy paste the code below,
if you also want to float right just make it another div and put float right on it 



now its working, try it :) :-

<div style="float:right">
<div style="border: 1px solid rgba(83, 87, 91, 0.67);
height: 39px;
line-height: 39px;
width: 15%;
text-align: center;
display: table-cell;
vertical-align: middle;"><div>
</div>

Upvotes: 0

radha
radha

Reputation: 782

try this one 

.cont
    { 
  border: 1px solid rgba(83, 87, 91, 0.67);
  height:39px;
  width: 15%;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  }

http://jsfiddle.net/P3BVv/1/

Upvotes: 3

anoymnous
anoymnous

Reputation: 1

add align="center"

eg:

<div align="center">
<img src="path/here"/>
</div>

Upvotes: 0

chakri
chakri

Reputation: 629

<div align="center">
         <img src=http://up.tractorfc.com/images/73529783235062014043.png /> 
</div>

try this one.

Upvotes: 0

Anandu
Anandu

Reputation: 79

remove the styles from img and add text-align center to the div.

<div style="border: 1px solid rgba(83, 87, 91, 0.67);float: right;height: 39px;line-height: 39px;width: 15%;text-align:center;">
 <img src=http://up.tractorfc.com/images/73529783235062014043.png /></div>

Upvotes: 0

Related Questions