HTML CSS 图片无法居中？

Question

我正在尝试将位于一个div中的图片居中，而该div又位于另一个div中。不用担心，我会贴上一些代码，这样你们就能看到我在谈论什么。

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

我现在一筹莫展！已经做了好久了！

感谢任何帮助，

Evan

- user725913

Answer 1

图片是内联元素，要使它们居中，您可以使用 text-align: center; 或将它们设置为 display: block 并设置 margin: 0 auto;

- user888750

---

但为什么W3Schools提供的示例无法居中图片？https://www.w3schools.com/cssref/pr_class_float.asp - Gabriel

在图像的父元素上使用 text-align:center，而不是在图像本身上使用。 - nCardot

另外，如果没有 display: block 属性，text-align: center 就不会起作用。 - Julius Goddard

Answer 2

根据您提供的标记结构，只需要按以下方式即可：

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

但是如果容器包含多个图像，上述方法将无效。那么以下方法将是理想的：

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

- Hanif

Answer 3

使用：

margin: auto !important;
display: block;

另外，尝试前往Play Store下载HTML代码应用程序，它会对您有所帮助。

- codaelux

Answer 4

确保在您的＃container上添加text-align: center，然后在featureImage上添加margin: 20px auto;。如果您希望img居中于featureImage中，则应该起作用（featureImage将继承text-align：center）。

- mkk

---

如果你这样做，它会居中所有东西，这似乎不是想要的，但也许可以。 - user888750

但它也可以在IE中运行 :) 我没有发明IE，请不要责怪我 :) - mkk

Answer 5

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

- Joseph Marikle

---

你是在尝试将文本对齐方式设置为居中，以适用于图片吗？ - mkk

你需要从这个例子中移除 margin-left 和 margin-right。 - user888750

Answer 6

我会尝试这个CSS：

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

我可能完全错了，因为我还没有测试过它。

- Oliver Spryn

Answer 7

这也可以通过简单地放置一个<center>标签来解决：

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

但是最好的方式和类似于HTML5的方式如下所述：

在头部中定义：

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

要在主体中使用此类：

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

就是这样了。最后一个方法是w3c推荐的。

- abu_bua

---

"<center>"标签已经过时一年多了。https://www.w3.org/TR/2010/WD-html5-20100304/obsolete.html并且在此之前就已经被弃用了。 - Rob

Answer 8

我一定会使用这个的，如果你希望它与页面一起移动，请使用fixed将其保持在那个位置。

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

- jerry