gpt4 book ai didi

css - 我不知道为什么我的图片没有 float 到中心

转载 作者:行者123 更新时间:2023-11-28 17:10:02 24 4
gpt4 key购买 nike

我需要我的图像在中心,但出于某种原因不是这样。
我的 HTML 代码:

<div class="face-img">
<img id="profile-img" src="http://host2post.com/server13/photos/jI7X5kXAIEk_4M~/1680x1050-lake-tahoe-california-desktop-wallpaper-background.jpg" />
</div>

还有我的 CSS 代码:

.face-img{
display: inline-block;
}
#profile-img{
height: 200px;
width: 200px;
border-radius: 50%;
}
.face-img #profile-img{
float: center;

http://jsfiddle.net/BBaughn/e941djLg/

最佳答案

作为MDN states , text-align 属性需要在父元素上:

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

由于 img 元素默认是 inlinetext-align: center 将有效地将子 img 居中> 父元素中的元素。

Updated Example

在你的情况下,你只需要删除 display: inline-block 因为这会导致父级有一个 "shrink to fit" width (这意味着父元素与子元素的宽度相同,因此看不到居中)。

.face-img {
text-align: center;
}

此外,center 不是 float property 的有效值.

关于css - 我不知道为什么我的图片没有 float 到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29415684/

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