tag does not work in IE

Question

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?

`` tag is deprecated, you should **not** be using it at all, see [here](http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html). Use CSS instead to center your divs and images. — Aurelio, Jun 02 '15 at 13:21
I just tried your example in IE11 and the image is centered. — Konstantin Dinev, Jun 02 '15 at 13:24
The `` tag is self closing you don't need ``, use like so: ``. The image is centered in IE for me. — hungerstar, Jun 02 '15 at 13:25
Updated your fiddle a little bit. Works fine in Chrome and IE: https://jsfiddle.net/nf5hghqy/3/ — HaukurHaf, Jun 02 '15 at 13:28

dippas · Accepted Answer · 2015-06-02T14:07:22.850

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;
}

edited Jun 02 '15 at 14:07

answered Jun 02 '15 at 13:29

dippas

58,591
15
114
126

I have just replicated what you have mentioned above. Yet it is not at the center – Archana Jun 02 '15 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 02 '15 at 13:45
Looks like its working in the fiddle, but not in my application. :(. Thank you – Archana Jun 02 '15 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 02 '15 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 02 '15 at 14:15

score 0 · Answer 2 · edited May 23 '17 at 12:06

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

edited May 23 '17 at 12:06

Community

1
1

answered Jun 02 '15 at 13:30

developer

1,565
1
9
12

score 0 · Answer 3 · answered Jun 02 '15 at 14:08

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.

Swaranan Singha Barman · Answer 4 · 2015-06-02T13:29:59.183

-1

try this.

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

edited Jun 02 '15 at 13:29

answered Jun 02 '15 at 13:29

Swaranan Singha Barman

337
1
14

score -4 · Answer 5 · answered Jun 02 '15 at 13:25

-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

answered Jun 02 '15 at 13:25

keikoku92

151
8

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 02 '15 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 02 '15 at 13:27

tag does not work in IE

5 Answers5