Html 图像赢得'；t居中，仅向左或向右对齐

我无法使图像在

下居中。如果我尝试float:left，则它将与最左侧对齐。如果我尝试正确，它会正确地这样做。但中锋就在左边

CSS

.b{
颜色：蓝色；}
r{
颜色：红色；}
.key{
边框样式：凹槽；
宽度：75px；}
.中心{
文本对齐：居中；}
阿姆斯特丹行程
img src=“*img*”alt=“dam”width=“140”height=“100”style=“float:center”/
键：


马特

克里

两者都

删除图像的浮动样式。

---

使用边距：0自动；相反

移除img的浮动，并将其包装在div中，并为该div提供以下css：

text-align: center;

---

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

---

您可以在这里试用：

您想要什么？看看这个例子

<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 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}