Question

我无法将我的图像置于我的＆lt; H1取代。如果我尝试浮动：向左，那么它对齐到最左边。如果我尝试正确，它就是这样做的。但是中心只停留在左边。

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

删除img的浮动并将其包装在div中，然后将该div赋予以下css：

text-align: center;

Answer 2

删除Image的浮动样式。使用保证金：0自动;代替;

Answer 3

如果你想让它在你的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/

图像不会居中，只能左右对齐

3 个答案: