如何设置图标的百分比高度，并将其垂直居中，同时左浮动？答案

【问题标题】：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"
    width="30pt" height="15pt" 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" width="200" height="100" />
    </g>
</svg>

尽管我在left_center_myicon 的两个实例上都指定了float: left，但只有在<a> 标记内时它才会向左浮动。

现在我的图标很小。我可以通过添加height: 100% 轻松使其填充banner_box 的高度。在较低的banner_box 中，这当然使图标100% 只是锚点。

如何设置图标的百分比高度，并将其垂直居中，同时左浮动？

简而言之，我可以将图标左居中

或将其放大到某个百分比

但不是两者兼而有之。

【问题讨论】：

由于某种原因，我在使用 SVG 方面确实不是最好的，但可以使用 position:absolute 来定位它吗？如果是这样，您可能会以这种方式获得左中心？

标签： html css svg centering

【解决方案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"
    width="30pt" height="15pt" 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" width="200" height="100" />
    </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 中的图标。但是正如您在运行代码时看到的那样，该图标不会向左浮动。它位于水平中心。