gpt4 book ai didi

html - 定义宽度和高度后,flex容器中的图像未居中

转载 作者:行者123 更新时间:2023-12-04 16:02:00 25 4
gpt4 key购买 nike

我正在使用 css flex box 做一些个人作品集。我想要做的是将图像水平居中,它确实居中,但问题是在我将 widthheight 定义为 img 之后图像位于开头或左侧不在中心。

这是居中而不定义 widthheight

时的样子

.center-img{
border-radius: 50%;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
}
<div class="center-img">
<img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user">
<h1>User</h1>
</div>

这就是定义widthheight

之后的样子

.center-img{
width:100px;
height:100px;
border-radius: 50%;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
}
<div class="center-img">
<img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user">
<h1>User</h1>
</div>

我希望在定义图像的 widthheight 后不会影响图像的位置。所以它应该在中心。谢谢!

最佳答案

需要考虑的几件事:

  1. 您从未将图像居中。

    在您的第一个代码示例中,图像占据了整个视口(viewport)宽度,因此它只是居中显示。当您使用 widthheight 减小图像的大小时,它会按照默认值左对齐。使用 align-items 在列方向容器中水平居中 flex 项。

  2. 不要将图像用作 flex 元素。有很多错误。

    众所周知,作为 flex 元素的图像在不同浏览器中存在渲染问题。相反,将图像包装在 div 中,并使 div 成为 flex 项。

  3. 将嵌套容器内的图像与 flex 属性对齐。

    使用嵌套的 flex 容器使图像居中。

.center-img {
display: flex;
flex-direction: column;
align-items: center;
background-color: lightgray;
}

.center-img > div {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
border: 1px dashed red;

}

.center-img > div > img {
width: 100%;
}

h1 {
margin: 0;
}
<div class="center-img">
<div>
<img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"
alt="user">
</div>
<h1>User</h1>
</div>

关于html - 定义宽度和高度后,flex容器中的图像未居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56408834/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com