html - 图片不会居中，只能左对齐或右对齐

Question

我无法让我的图像在我的 < h1> 下居中。如果我尝试 float:left，那么它会对齐到最左边。如果我尝试正确，它就会正确执行。但中心只是留在左边。

CSS

    .b {
            color: blue;}
    .r {
            color: red;}
    .key { 
            border-style: groove;
            width:75px;}
    .centre {
            text-align:center;}









 <h1 class="main"><ul>Amsterdam Itinerary</ul></h1>

 img src="*img*" alt="dam" width="140" height="100" style="float:center"/>

  <div class="key centre">Key:<br><br>
  <span class="b">Matt <br> </span>
  <span class="r">Kerry <br> </span>
   Both <br>
  </div>

Answer 1

如果您希望它在 H1 下方实际对齐，那么您还需要将 H1 居中并将其包装在容器 div 中。

<style>
    .b {color: blue;}
    .r {color: red;}
    .key { 
        border-style: groove;
        width:75px;
    }
    img.centre {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .centre {text-align:center;}
    .container{width:350px;}
</style>
<div class="container">
    <h1 class="main centre">Amsterdam Itinerary</h1>
    <img class="centre" src="img-source" alt="dam" width="140" height="100" />

    <div class="key centre">Key:<br><br>
        <span class="b">Matt <br> </span>
        <span class="r">Kerry <br> </span>
        Both <br>
    </div>
</div>

如果你只想让图片居中，那么你可以使用 img.centre 样式。

img.centre {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

您可以在这里试用:http://jsfiddle.net/gzvehb9y/