提问人：Kimo 提问时间：9/30/2023 更新时间：9/30/2023 访问量：55
在图像周围添加边框后，如何在 div 中将图像居中？
How to center the image in the div after adding the borders around the image?
问：
正如你所看到的，我添加了图片，我将 DIV 居中在网页的中心，并将 DIV 中的图像和文本居中在网页的中心。
问题是，当我在图像周围添加 5px 白色边框时，图像的右侧会脱离 DIV。我明白这是因为添加了边框，因为没有边框，图像会正确居中。
那么有没有办法在所有边上添加 5px 边框，但也在 DIV 中的中心包含图像，而不会使图像的右侧脱落？
PS：我还是个初学者，所以如果我的问题听起来有点简单或奇怪，请原谅我。
我尝试通过相对于 DIV 大小的宽度像素来计算图像，这样我就可以在图像周围添加边框并仍然在 DIV 中保持图像后将图像居中。
但我要问的是，有没有可能在中型项目中工作时，我应该总是计算我应该输入多少个像素的宽度，并添加边框像素以达到中心图像的相关性？
如果这是唯一的方法，当然没问题，我会算一算。 我只是问将来是否有更好、更有效的方法来完成这项任务.
答：
-1赞
Aditya Jaiman
9/30/2023
#1
在编写 CSS 以重置浏览器应用于某些元素的默认 CSS 样式时，通常应使用此属性。
*, *::after, *::before {
box-sizing: border-box;
}
阅读有关 CSS Box Sizing W3Schools 的信息
此外，将图像元素单独包装在容器 div 中也是一种很好的做法，如下所示
<div>
<div class="img-container">
<img src="#" alt="website banner" />
</div>
<h1>Never Give up, Keep pushing</h1>
<p>No matter what happens, always keep pushing forward</p>
</div>
评论
0赞
A Haworth
9/30/2023
我不清楚为什么这些建议中的任何一个都是最佳实践。这难道不取决于整体背景吗？例如，为什么 img 应该包装在 div 中？这从内联移动，内联可能是必需的，也可能不是必需的。如果您完全控制整个项目，则移动所有元素的框大小可能没问题，但如果这是协作项目的一部分，而其他人依赖于默认设置，则可能会产生奇怪的结果。
0赞
Aditya Jaiman
9/30/2023
将 img 包装在 div 或容器标签中更适合布局控制和响应式设计。图像可以覆盖容器，容器可用于响应式设计。至于框大小，请不要将整个项目移动到边框框，然后手动计算宽度和边框，或根据您的要求使用百分比设置它们。
-1赞
Alteria
9/30/2023
#2
如果要确保图像保持在 div 的边界内，可以使用：
img {
object-fit: contain;
}
这可确保图像的大小不超过其父元素的边界。将来，您应该将所有元素的 border-sizing 属性设置为 border-box，如下所示：
*, *::before, *::after {
box-sizing: border-box;
}
此属性更改元素的呈现方式，以便不会将边框和填充添加到元素上。相反，它为这些属性获取元素的部分维度。
评论