我正在使用 css flex box 做一些个人作品集。我想要做的是将图像水平居中,它确实居中,但问题是在我将 width
和 height
定义为 img
之后图像位于开头或左侧不在中心。
这是居中而不定义 width
和 height
.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>
这就是定义width
和height
.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>
我希望在定义图像的 width
和 height
后不会影响图像的位置。所以它应该在中心。
谢谢!
最佳答案
需要考虑的几件事:
您从未将图像居中。
在您的第一个代码示例中,图像占据了整个视口(viewport)宽度,因此它只是居中显示。当您使用
width
和height
减小图像的大小时,它会按照默认值左对齐。使用align-items
在列方向容器中水平居中 flex 项。不要将图像用作 flex 元素。有很多错误。
众所周知,作为 flex 元素的图像在不同浏览器中存在渲染问题。相反,将图像包装在 div 中,并使 div 成为 flex 项。
将嵌套容器内的图像与 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/