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

Question

以 HTML 为中心及其变体当然已被询问和回答 innumerable .

不过，我遇到了基本问题。

.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% 只是锚点。

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

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

或放大到一定比例

但不是两者。

Answer 1

.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 我希望这是你问的。

Answer 2

某些对象及其属性在放置在某些元素标签中时显示不同，例如您在 img 标签周围的标签。

我对此有一个建议和修复，但请注意，这只是针对您拥有的元素，还有其他方法可以实现您的需要，但这里有一个针对您的问题的修复。

（步数：） 我建议将 'text-align:center' 添加到 '.banner_box' 以居中对齐可能添加的任何其他元素（例如文本）并增加额外的兼容性。

然后将 'display:flex' 属性更改为 'display:block' 因为 'flex' 是高度百分比不起作用的原因，因为它使用固定高度值以便flex，例如 100px 而不是 100% 并且在大多数情况下还需要 flex-direction 等。

然后，在 '.left_center_myicon' 上要在垂直中心对齐项目同时保持浮动，您可以添加 'position:relative' 然后添加 'top:50%' & 'left:50%' 将顶部和左侧位置值设置为 'banner_box 宽度和高度的一半 (50%)。然后添加“转换：翻译（-50%，-50%）；”设置元素沿 banner_box 的 x/y 轴的准确位置。在此之后，如果您愿意，也可以删除 'display:block'，因为位置和轴已设置，除非您需要它来做其他事情。

两个元素现在都应该位于绝对中心，同时保持浮点值并使用高度 % 值。

我也在 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%);

代码笔已更新

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

How do I set the percent height of an icon, and vertically center it, while left-floating it?

html

css

svg

centering