Question

我正在尝试将svg放在父div的中心，而不是将其整体高度扩展到该父本中的文本之外。我可以将其居中，但由于某些原因，svg子div似乎具有任意高度。有什么想法吗？

#child{
  background:yellow;
}

#child svg{
  width:24px;
  height:100%;
  display:inline-block;
}

#parent{
  display:flex;
  background:silver;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
  <div id="parent">
  <h1>
  hi
  </h1>
   <div id="child">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
  </div>
  </div>
 
  </body>
</html>

我尝试将宽度和高度指定为svg的100％，但这将导致图像非常大。我也尝试将svg的宽度和高度都设置为24px，但不再居中。我也尝试过线高，但无济于事。我不想给父母一个身高。

Answer 1

您可以在<svg>标签内添加<h1>，也可以添加第二个包含SVG的<h1>（默认为inline-block陈述一下）。唯一的区别是，在第一种情况下，换行由标准文本的空白/换行行为控制，在第二种情况下，由父div的flex规则控制。

#child{
  background:yellow;
}

#child svg{
  width:24px;
  height:100%;
}

#parent{
  display:flex;
  background:silver;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
  <div id="parent">
  <h1>
  hi
  </h1>
   <h1 id="child">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
  </h1>
  </div>
 
  </body>
</html>

SVG在父div的中心，其高度由字体设置

1 个答案: