CODEWITHSUNDEEP
htmlcssimage
user725913
user725913

Reputation:

HTML CSS Image won't center?

I am trying to center an image that is located within a div, which is then located inside of another div. Not to worry, I will post some code so you can all see what the heck I'm talking about here.

HTML:

<div id="container">

    <div id="featureimage"  style="width: 845px">
        <img src="Stylesheets/images/globkey.jpg" alt="" />
    </div>

</div>

CSS:

body {
    background-color: #383838;
    margin: 0; padding: 0;
    font-size: small;
    color: #383838;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
* html body {
    font-size: x-small; /* for IE5/Win */
    font-size: small; /* for other IE versions */
    }

img {
    border-style: none;
}



/* Conatiner */ 
#container {
    background-color: #fff;
    width: 845px;
    margin: 0 auto;
    overflow: hidden;
    }


#featureimage{
    width: 620px;
    padding: 0 0 0 15px;
    margin: 20px 0;

/* I have also tried without padding and no margin!*/
    }   

#featureimage img{
    margin-left:50%;
    margin-right:50%;
    width:360px;
    height:360px;
    }

I am fresh out of ideas here! Been at this for ever!

Thank you for any help,

Evan

Upvotes: 13

Views: 68907

Answers (8)

codaelux
codaelux

Reputation: 11

Use:

margin: auto !important;
display: block;

Also try going to Play Store download the app HTML code it will come in handy for you.

Upvotes: 1

Hanif
Hanif

Reputation: 3795

According your provided markup structure it is enough to following way:

img {
    display: block;
    margin: 0 auto;
}

But above approach will work if container contain single image. Bu if container contain multiple image then above technique will not work anymore then following way would be ideal:

#featureimage {
   text-align: center;
}
img {
    display: inline-block;
    vertical-align:top; // It is recommended when you use css property vertical-align
}

Upvotes: 1

abu_bua
abu_bua

Reputation: 1647

It can also be solved by simple put a <center> tag:

<center>
<img src="abc.gif">
</center>

But the best way and html5-like is as mentioned next:

define in the header:

<style>
    img {
        display: block;
        margin-left: auto; 
        margin-right: auto;
    }
 </style>

To make use of this class in the body:

<img src="abc.gif" alt="abc" style="width: 90%; max-width: 300px;>

That's all. The last method is that recomended by w3c.

Upvotes: 0

jerry
jerry

Reputation: 41

i would use this for sure,, the absolute; will keep it in that spot if you want it to move with the page put fixed; but other than that boom

#featureimage {
  width: "change this code to whatever expample..."   555px;
  height: "change this code to whatever example..."    96px;
  position: absolute;
  top: "change this to where ever it centers , you just have to mess with it.. example..." 960px;
  right: "same with this i had to put - to get it right as far as i could just play with it..."  -945px;
}

Upvotes: 0

Oliver Spryn
Oliver Spryn

Reputation: 17368

I would try this css:

#featureimage{
  width: 620px;
  padding: 0 0 0 15px;
  margin: 20px auto 0px auto;
  text-align: center;
}

I may be totally off on this one, as I haven't tested it out.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78580

#featureimage{
    width: 620px;
    padding: 0 0 0 15px;
    margin: 20px 0;
    text-align:center;
}

Upvotes: 0

user888750
user888750

Reputation:

Images are inline elements, to center them, you can use text-align: center; or set them to display: block and set margin: 0 auto;

Upvotes: 40

mkk
mkk

Reputation: 7693

just for sure add text-align: center to your #container, and then add margin: 20px auto; to your featureImage. If you want img to be centered within featureImage should work (featureImage will inherit text-align: center).

Upvotes: 1

Related Questions