Question

我有这个css：

   <style type="text/css">

    #heading{
        margin:auto; 
        background-color: brown;

    }
</style>

和这个html：

<div id="heading">
        <image src="image_files/header-background.jpg" alt="speakom"   />
    </div>

我不知道图像的确切大小..但是我希望div用精确的宽度包裹图像然后我想把那个div放在中心。我怎么做到这一点？

Answer 1

使用inline-block会使div成为其内容的宽度，并允许您将其与自动边距居中：

#heading {
    margin: 0px auto;
    display: inline-block;
}

Answer 2

像这样写：

.parent{
  text-align:center;
}

    #heading{
     display:inline-block;
     *display:inline;/* For IE7*/
     *zoom:1/* For IE7*/
     text-align:left;
    }

<强> HTML

<div class="parent">
 <div id="heading">
        <img src="image_files/header-background.jpg" alt="speakom"   />
 </div>
</div>

选中此http://jsfiddle.net/sAYEq/

Answer 3

获取

margin: auto;

声明工作就像你想要的那样，你需要指定div的宽度。在不知道图像大小的情况下，您只需要猜测它是什么或使用javascript

Answer 4

根据我的经验，戴夫的答案行不通（不再？不是总是？）。我首选的解决方案是使用flexbox：

<article>
  <figure>
    <img src="https://placekitten.com/300/200" />
    <figcaption>Cute!</figcaption>
  </figure>
</article>

article {
  display: flex;
  flex-direction: column;
}
figure {
  margin: 0 auto;
  background-color: lightgray;
}
figcaption {
  padding: 1em;
}

在https://codepen.io/marcvangend/pen/vPBVOv上亲自观看。

优势：

居中的元素（此处为<figure>）紧紧围绕图像。
内部的所有元素（此处为<img>，<figcaption>）具有相同的宽度。
由于我们未使用text-align: center，因此figcaption中的文本保持左对齐。

如何将图像包装在div中，然后将div居中

4 个答案: