如何设置图标的百分比高度，并将其垂直居中，同时左浮动？
Posted
技术标签:
【中文标题】如何设置图标的百分比高度，并将其垂直居中，同时左浮动？【英文标题】：How do I set the percent height of an icon, and vertically center it, while left-floating it? 【发布时间】：2021-12-09 21:09:58 【问题描述】：以 html 为中心及其变体当然已被询问和回答 innumerable times.
不过，我还是有一些基本问题。
.banner_box
width: 640px; height: 150px;
background-color: #ddd;
margin: 5px;
display: flex;
align-items: center;
.left_center_myicon
display: block;
margin: 0 auto;
float: left;
/*height: 100%;*/
<div class="banner_box">
<img class="left_center_myicon" src="myicon.svg" />
</div>
<div class="banner_box">
<a href="index.html"><img class="left_center_myicon" src="myicon.svg" /></a>
</div>myicon.svg 由一个矩形组成：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 200" version="1.1">
<g style="fill:rgb(10%,40%,70%);fill-opacity:1;">
<rect x="100" y="50" rx="20" ry="20" />
</g>
</svg>
尽管我在left_center_myicon 的两个实例上都指定了float: left，但只有在<a> 标记内时它才会向左浮动。
现在我的图标很小。我可以通过添加height: 100% 轻松使其填充banner_box 的高度。在较低的banner_box 中，这当然使图标100% 只是锚点。
简而言之，我可以将图标左居中
或将其放大到某个百分比
但不是两者兼而有之。
【问题讨论】：
由于某种原因，我在使用 SVG 方面确实不是最好的，但可以使用 position:absolute 来定位它吗？如果是这样，您可能会以这种方式获得左中心？ 【参考方案1】：某些对象及其属性在放置在某些元素标签中时会以不同的方式显示，例如您在 img 标签周围的。
我对此有一个建议和解决方案，但请注意，这只是针对您拥有的元素，还有其他方法可以实现您的需求，但这里是您的问题的解决方案。
（步骤：） 我建议在 '.banner_box' 中添加一个 'text-align:center' 以居中对齐可能添加的任何其他元素，例如文本，并增加额外的兼容性。
然后将 'display:flex' 属性更改为 'display:block' 因为 'flex' 是高度百分比不起作用的原因，因为它使用固定高度值来进行伸缩，例如 100px 而不是 100%而且在大多数情况下，还需要 flex-direction 等。
然后，在 '.left_center_myicon' 上对齐垂直中心的项目，同时保持浮动，您可以添加 'position:relative' 然后添加 'top:50%' & 'left:50%' 来设置顶部和左侧位置值是 'banner_box 宽度和高度的一半 (50%)。然后添加'transform: translate(-50%, -50%);'设置元素沿banner_box 的x/y 轴的准确位置。在此之后，如果您愿意，也可以删除“显示：块”，因为位置和轴已设置，除非您需要它用于其他目的。
现在两个元素都应该位于绝对中心，同时保持浮点值并使用高度 % 值。
我也在 codepen 上创建了这个： https://codepen.io/JJCrook/pen/PoKWjWW
HTML：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 200" version="1.1">
<g style="fill:rgb(10%,40%,70%);fill-opacity:1;">
<rect x="100" y="50" rx="20" ry="20" />
</g>
</svg>
<div class="banner_box">
<img class="left_center_myicon" src="https://jcrooktesting.000webhostapp.com/mysvg.svg" />
</div>
<div class="banner_box">
<a href="index.html"><img class="left_center_myicon" src="https://jcrooktesting.000webhostapp.com/mysvg.svg" /></a>
</div>
CSS：
.banner_box
width: 640px;
height: 150px;
background-color: #ddd;
margin: 5px;
align-items:center;
display: block;
text-align:center;
.left_center_myicon
margin: 0 auto;
float: left;
height: 70%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
*修改后的 CSS：（更改为 .left_center_myicon）
left: 0;
transform: translate(0%, -50%);
codepen 已更新
【讨论】：
好的...很酷..但这会放大图标并使其水平和垂直保持在中心。我想把它放大并保持在浮动left的垂直中心，而不是水平中心。 啊，我明白了，好吧，我已经修改了上面的代码。将左：50% 更改为左：0； & 从 -50%、-50% 转换为 0%、-50% 但是left: 0; 是无关紧要的，不是吗？是float: left; 负责，嗯，向左浮动。这个很酷。 transform 看起来有点像补丁。我需要多玩一点。特别是，如果你说的是top: 50% 和height: 70%，那么翻译应该只是35%，不是吗？
这取决于，您可以调整左侧位置，同时使用此示例将其向左浮动。高度设置为 70% 以进行演示，它可以更改，同样，有很多方法可以实现您想要的，我的回答是对您的问题和您使用的代码的简单解决方案。该方法当然会根据您的相关内容而有所不同，但无论哪种方式，希望这会有所帮助:)
@Crook 有帮助，但翻译不是 35%（一半 70%）使它看起来像魔术 ;-)【参考方案2】：
.banner_box
width: 640px; height: 140px;
max-height:140px;
background-color: #ddd;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
.left_center_myicon
display: block;
margin: 0 auto;
float: left;
.fab
font-size: 50px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="github.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
<div class="banner_box">
<p class="left_center_myicon"><i class="fab fa-audible"></i></p>
</div>
<div class="banner_box">
<p class="left_center_myicon"><i class="fab fa-audible"></i></p>
</div>
</body>
</html>我不完全明白你的问题，但这是我最好的猜测。您正在尝试使 SVG 更大或更小，您可以通过 CSS 中的 font-size 属性来实现。尝试在我上面添加的代码中更改 .fab 的字体大小。我使用了来自 font-awesome 的 SVG，我希望这是你所问的。
【讨论】：
当然...我想您可以使用 font-awesome 中的图标。但是正如您在运行代码时看到的那样，该图标不会向左浮动。它位于水平中心。以上是关于如何设置图标的百分比高度，并将其垂直居中，同时左浮动？的主要内容，如果未能解决你的问题，请参考以下文章