CODEWITHSUNDEEP
css
Gandalf
Gandalf

Reputation: 13693

Using margins to center an icon on a div

I am trying a method of centering an icon using margins.I am giving the icon a width in % and the height in % too.I have

.container{
width:600px;
height:200px;
background-color:orange;
}
img {
width:6%;
margin-left:47%;
margin-right:47%;
height:16%;
margin-top:12%;
margin-bottom:12%;
}
body{

}

The method centers the icon horizontally but not vertically.I wonder why this wont work

img {
    width:6%;
    margin-left:47%;
    margin-right:47%;
    height:16%;
    margin-top:42%;
    margin-bottom:42%;
    }

I also have this fiddle but the margin-top and margin-bottom i have used are random http://jsfiddle.net/thiswolf/EKWWt/

Upvotes: 0

Views: 2086

Answers (4)

RVC
RVC

Reputation: 69

I think the image is taking margins from the body and not from the container div. To centre image horizontally and vertically you can set position: relative; in the container div and position: absolute; in img element. This can be one of the possible solution.

So the css can be like this...

.container{
  width:600px;
  height:200px;
  background-color:orange;
    position: relative;
 }
 img {
 width:6%;
 margin-left:47%;
 margin-right:47%;
 height:16%;
 margin-top:42%;
 margin-bottom:42%;
    position: absolute;
}

Upvotes: 0

John
John

Reputation: 13699

I can't see your image because of firewall nonsense, but take a look at this answer. Also here is my forked fiddle.

.container{
    width:600px;
    height:200px;
    background-color:orange;
    text-align:center;
    line-height:138px; /*You'll have to play around with this value*/
}

img {
    vertical-align:middle;
}

Upvotes: 1

FluffyJack
FluffyJack

Reputation: 1732

You could try just placing the icon in as a background instead. If it's a requirement that it be in the html because it's loaded dynamically, then you can use javascript to replace it as a background.

Upvotes: 0

Prasath Albert
Prasath Albert

Reputation: 1457

Try with:

.container{
width:600px;
height:200px;
background-color:orange;
}
img {
margin:12% 50%;
}

Upvotes: 0

Related Questions