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

也可以通过简单的＆lt; center＆gt; 标记来解决：

<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推荐的。

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代码，它会派上用场。

HTML CSS图片不会居中？

HTML：

CSS：

8 个答案: