0

The issue is to align the image at the center of the div. This is working properly in chrome, except for IE

<DIV id="content"><P>Internal resources </P>
 <DIV class="containertop">
   <P>External resources </P> 
 </DIV>
 <DIV class="contentcontainer">
 <DIV class="containerImg">
    <img height="286" width="381" src="http://www.bestwestern.com/img/bg-groups-meetings.png" /alt="Banner Image" title="Banner Image"></img>

</DIV>
</DIV>
</DIV>

CSS:

 .containerImg Img { 
   border: 0 none;
   padding: 0px !important;
   margin: 0px;
   width: 368px;
   height: 277px;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

#content .contentcontainer { 
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}

#content .containertop {
padding-top: 15px;
color: #999;
}

div#content {
 font: normal 12px/1.6em arial;
 font-size: 12px;
 color: #666;
 width: 471px;
 padding: 10px 10px 0 10px;
 margin: 0;
 background-color: #fff;
 min-height: 100%;
 height: 100%;
 background-color: #fff !important;
 min-height: 100% !important;
 height: 100%;
 }

I removed tag and tried above CSS and that is also not working.

Here is the fiddle : https://jsfiddle.net/nf5hghqy/10/ (Open in IE)

Can we resolve this?

5
  • 11
    <center> tag is deprecated, you should not be using it at all, see here. Use CSS instead to center your divs and images.
    – Aurelio
    Jun 2, 2015 at 13:21
  • which IE version are you using ?
    – Felix A J
    Jun 2, 2015 at 13:24
  • I just tried your example in IE11 and the image is centered. Jun 2, 2015 at 13:24
  • 2
    The <img> tag is self closing you don't need </img>, use like so: <img src="my-image.jpg">. The image is centered in IE for me.
    – hungerstar
    Jun 2, 2015 at 13:25
  • Updated your fiddle a little bit. Works fine in Chrome and IE: jsfiddle.net/nf5hghqy/3
    – HaukurHaf
    Jun 2, 2015 at 13:28

5 Answers 5

4

<center> tag is deprecated (see here)

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the element or to an individual

. For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto).

To get img aligned center you have to set it display:block ( because img is by default an inline element) and margin:auto

Another mistake, img is a self-closing tag, so you can't do this <img></img>

See snippet below:

div {
  border: 1px solid red /*demo purposes */
}
img {
  display: block;
  margin: auto;
}
<div class="containerImg">
  <img src="http://www.bestwestern.com/img/bg-groups-meetings.png" alt="Banner Image" title="Banner Image" />
</div>

UPDATE - Based on OP's new fiddle:

your issue is here:

#content .contentcontainer { 
  float:left;
  padding: 5px 10px 0 0;
  margin: 1px 0 0 0px;
}

simply remove float:left, like this:

#content .contentcontainer { 
  padding: 5px 10px 0 0;
  margin: 1px 0 0 0px;
}
5
  • I have just replicated what you have mentioned above. Yet it is not at the center
    – Archana
    Jun 2, 2015 at 13:42
  • Did you Run the code snippet? Its working in the snippet so if you replicated and it is not working, you may have some CSS overridden this small piece of code.
    – dippas
    Jun 2, 2015 at 13:45
  • Looks like its working in the fiddle, but not in my application. :(. Thank you
    – Archana
    Jun 2, 2015 at 14:08
  • Same explanation I gave you before, it could be an overriden CSS. Better if you could show the entire code at this point, maybe the link.
    – dippas
    Jun 2, 2015 at 14:12
  • 1
    Dont mind, I cannot post my code here. It will violate the security. This will be the accepted answer anyway. It helped.
    – Archana
    Jun 2, 2015 at 14:15
0

First check you have added doctype center tag doesn't work in IE ,you can use CSS as text-align: center , and auto for margin , then it will work ok in IE. Fine more here

0

From http://www.w3.org/Style/Examples/007/center.en.html#block:

.containerImg img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

The important part is to make sure the image is a block element; this way it has width. The margin-left and margin-right set to auto automatically set margins based on the width of the block element image, making the image center itself.

-1

try this.

.containerImg img{
     margin:auto;
     display:block
}
-4

You need to remove the tags and add some css either as separate file or in line and use margin:auto; instead of your margin-left and margin-right

2
  • 2
    margin-left: auto; and margin-right: auto; are just fine. OP does not need to use the shorthand margin: auto. All that does is set the top, right, bottom and left margin to auto all at once.
    – hungerstar
    Jun 2, 2015 at 13:26
  • 1
    While this does help to explain what the OP needs to do, it's formatted more as a comment rather than an answer. In addition, there's nothing wrong with using margin-left: auto; and margin-right: auto; though as you note, it could be combined into a simplier margin: 0 auto;.
    – War10ck
    Jun 2, 2015 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.