在图像的左下角放置文本时，无法在网站中居中图像。 CSS/HTML答案

【问题标题】：Cannot center an image in website while placing a text on the bottom left-edge of the image. CSS/HTML在图像的左下角放置文本时，无法在网站中居中图像。 CSS/HTML
【发布时间】：2021-02-28 07:11:38
【问题描述】：

正如标题中所提到的，我在将文本准确地放置在图像的左下角时，无法在网站上居中放置图像。我试图寻找答案，但很难找到它..

这是我的 HTML：

<body>
    <div class="body">
        <img src="myself.jpg" alt="photo" class="image" align="top">
        <p class = "body_p">
            testing
        </p>
    </div>
</body>

这是我的 CSS：

.body img {
    margin: auto;
    display: block;
}

【问题讨论】：

标签： html css center bottom

【解决方案1】：

使用width: fit-content; 样式作为img 标签。

.body img {
    margin: auto;
    width: fit-content;
    display: block;
}

<body>
    <div class="body">
        <img src="myself.jpg" alt="photo" class="image" align="top">
        <p class = "body_p">
            testing
        </p>
    </div>
</body>

【讨论】：

【解决方案2】：

尝试将不同尺寸的图像放入src，它会集中。就像背景图像一样，您也可以设置图像位置。如果图像太大，它将显示该图像的中心区域。

img {
  width: 220px;
  height: 165px;
  object-fit: cover;
  object-position: center;
}

<body>
    <div class="body">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png" alt="photo" class="image" align="top">
        <p class = "body_p">
            testing
        </p>
    </div>
</body>

【讨论】：