gpt4 book ai didi

css - 图标没有完全居中

转载 作者:太空宇宙 更新时间:2023-11-04 06:01:53 25 4
gpt4 key购买 nike

我正在使用语义 UI 图标并尝试组合多个图标来创建一个新图标。使用大图标时,效果很好,但使用小图标时,图标似乎没有完全居中。

下面,我们看到图标越小,水平对齐越不正确

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/icon.css">
</head>
<body>

<i class="huge icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>

<i class="big icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>

<i class="large icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>

<i class="icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>
</body>
</html>

最佳答案

默认情况下定义的小边距会导致此问题,只需将其删除即可:

i.icons .icon:first-child {
margin-right:0;
}

完整代码:

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/icon.css">
<style>
i.icons .icon:first-child {
margin-right:0;
}
</style>
</head>
<body>

<i class="huge icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>

<i class="big icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>

<i class="large icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>

<i class="icons">
<i class="circle outline icon"></i>
<i class="tiny times icon"></i>
</i>
</body>
</html>

关于css - 图标没有完全居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57219158/

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