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

我对这里的想法很新鲜！一直在这里！

感谢您的帮助，

埃文

Answer 1

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

Answer 2

只需确保将 text-align: center 添加到您的#container，然后添加 margin: 20px auto;到你的 featureImage。如果您希望 img 在 featureImage 中居中应该可以工作（featureImage 将继承 text-align: center）。

Answer 3

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

Answer 4

我会试试这个 css：

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

我可能完全不喜欢这个，因为我还没有测试过。

Answer 5

我肯定会用这个，绝对的；如果您希望它在固定页面的情况下移动，它将保留在该位置；但除了那股热潮

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

Answer 6

也可以通过简单的打个

标签来解决：

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

但最好的方式和类似 html5 的方法如下所述：

在标题中定义：

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

在body中使用这个类：

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

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

Answer 7

根据您提供的标记结构，以下方式就足够了：

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
}

Answer 8

用途：

margin: auto !important;
display: block;

也可以尝试去 Play 商店下载应用程序 HTML 代码，它会派上用场。