1

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

这是我的 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;
}
4

2 回答 2

0

为标签使用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>

于 2020-11-17T03:39:15.693 回答
0

尝试放入不同尺寸的图像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>

于 2020-11-17T08:30:20.797 回答