html - 我怎样才能把这些元素放在跨度的中间？

Question

问题是什么:

SVG 和文本都不会将自己定位在我的 span 中间。

我尝试过的:

我试过更改显示模式，使用边距对齐元素，文本对齐。尝试使用来自 stackexchange 的解决方案，但没有一个有效。

JSFIDDLE

.knowledge-container {
  margin: auto;
  margin-top: 3vh;
  width: 95%;
  padding: 5px;
  text-align: center;
}

.knowledge-box {
  margin: 5px 0.5vw 0px 0.5vw;
  height: 10vw;
  width: 10vw;
  border: 4px solid white;
  border-radius: 15px;
  background-color: none;
  display: inline-block;
  overflow: hidden;
}

.knowledge {
  width: 100%;
  height: 100%;
}

.knowledge span {
  display: block;
}

.knowledge-box #topic-logo {
  height: 85%;
  width: auto;
  background-color: pink;
}

.knowledge-box #topic-desc {
  height: 15%;
  width: auto;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

.knowledge svg {
  fill: white;
  width: auto;
  height: 90%;
  width: auto;
  margin: auto;
  padding-top: 15px;
}

<div class="knowledge-container">
  <div class="knowledge-box">
    <div class="knowledge">
      <span id="topic-logo"><svg></svg></span>
      <span id="topic-desc">Language</span>
    </div>
  </div>
</div>

Answer 1

您可以使用 top 解决您的问题和 transform: translateY() .如果您不熟悉 transform和 translate ，读一读here和 here分别。

来自 MDN 文档:

The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.

---

解决方案

看看这个updated fiddle .

将以下 css 属性添加到您的 <svg> :

.knowledge svg {
  ...
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}

为您的topic-desc , 添加另一个 <span>里面并添加相同的规则:

.knowledge span span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

---

演示

您可以通过运行下面的演示来查看结果。

.knowledge-container {
  margin: auto;
  margin-top: 3vh;
  width: 95%;
  padding: 5px;
  text-align: center;
}

.knowledge-box {
  margin: 5px 0.5vw 0px 0.5vw;
  height: 30vw;
  width: 30vw;
  border: 4px solid white;
  border-radius: 15px;
  background-color: none;
  display: inline-block;
  overflow: hidden;
}

.knowledge {
  width: 100%;
  height: 100%;
}

.knowledge span {
  display: block;
}

.knowledge span span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.knowledge-box #topic-logo {
  height: 85%;
  width: auto;
  background-color: pink;
}

.knowledge-box #topic-desc {
  height: 15%;
  width: auto;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

.knowledge svg {
  fill: white;
  width: auto;
  height: 90%;
  width: auto;
  margin: auto;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}

<div class="knowledge-container">
  <div class="knowledge-box">
    <div class="knowledge">
      <span id="topic-logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 990 990"><title>Brain</title><path d="M489,124c0-32-13-61-36-83A123,123,0,0,0,368,6h0C301,6,249,57,246,120l-25,5c-58,18-91,75-79,131-15,5-26,14-34,27s-12,47,3,66c-45,17-78,60-78,110a111,111,0,0,0,20,64C24,540,5,569,5,602s26,74,65,87c-7,8-13,15-17,26s-9,42-1,64,45,52,79,52h13a96,96,0,0,0,26,61c20,22,46,34,77,37h17c19,41,60,68,107,68,64,0,115-48,116-110h0V125c1,0,1,0,1-1h0ZM373,968a93,93,0,0,1-81-47c41-14,73-50,77-94,0-8-5-13-12-14s-13,5-15,11c-4,46-45,79-91,77a84,84,0,0,1-58-28c-15-17-23-38-20-60h0c0-3,0-4-1-6s-11-10-17-8c-30,11-65-3-77-32a61,61,0,0,1,0-43q10-21,32-31c7-3,11-10,8-17a15,15,0,0,0-13-8h-3c-38,0-69-29-69-66s30-66,69-66c8,0,13-5,13-13s-5-13-13-13a86,86,0,0,0-25,4,88,88,0,0,1-19-54c0-51,42-92,95-92s95,41,95,92c0,8,5,13,13,13s13-5,13-13c0-65-54-117-122-117H137a1,1,0,0,0-1-1c-13-11-16-31-7-46a38,38,0,0,1,53-13c7,4,15,1,19-5s1-14-5-18-19-8-28-8c-11-45,16-89,61-103,15-4,29-5,42-3,24,4,45,17,58,36,4,6,12,8,19,3s8-11,3-18c-17-24-45-41-75-46h-4c1-50,44-89,95-89h0c25,0,49,10,67,27a89,89,0,0,1,28,65h0V293H350s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H463V422H361c-8,0-13,5-13,13s5,13,13,13H463V560H252s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H464V691H313c-5,0-37-3-58,17s-23,32-23,56c0,8,5,13,13,13s13-5,13-13,4-29,13-37,38-10,38-10H462V881C463,930,422,968,373,968Z" transform="translate(-5 -5)"/><path d="M995,602c0-33-19-63-46-79a111,111,0,0,0,20-64c0-50-32-92-78-110,13-19,16-46,3-66s-21-23-34-27c12-56-21-114-79-131l-25-5c-1-31-13-59-36-80A123,123,0,0,0,632,5h0C565,5,511,57,511,122h0V883h0c1,61,53,110,116,110,46,0,89-27,107-68h17c30-3,57-15,77-37s25-40,26-61h13c34,0,66-19,79-52s5-65-19-88C967,676,995,642,995,602Zm-97,66h-3a15,15,0,0,0-13,8c-3,6,0,14,8,17,30,11,45,45,33,74s-46,43-77,32c-7-3-15,0-17,8s-1,4-1,6h0c1,22-5,43-20,60a84,84,0,0,1-58,28c-48,4-89-31-91-77,0-8-7-13-15-11s-13,6-12,14c4,45,34,80,77,94-15,29-46,47-81,47-50,0-90-40-90-87V717H689s24-3,38,10,13,20,13,37,5,13,13,13,13-5,13-13c0-24-8-43-22-56s-53-17-58-17H537V583H753c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4,29-13,37-38,10-38,10H538V445H640c8,0,13-5,13-13s-5-13-13-13H538V316H654c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4,29-13,37-38,10-38,10H538V125h0c0-51,42-92,95-92h0c25,0,49,9,68,27s28,38,28,63h-4c-30,5-58,22-75,46-4,6-3,14,3,18s15,3,19-3c13-19,36-32,58-36a94,94,0,0,1,42,3c22,8,42,23,53,43s13,40,8,60a113,113,0,0,0-28,8c-7,4-8,11-5,18s12,8,19,5c19-10,42-4,53,13s7,34-7,46a1,1,0,0,1-1,1H847c-67,0-122,52-122,117,0,8,5,13,13,13s13-5,13-13c0-51,42-92,95-92s95,41,95,92a88,88,0,0,1-19,54,80,80,0,0,0-25-4c-8,0-13,5-13,13s5,13,13,13c38,0,69,29,69,66S937,668,898,668Z" transform="translate(-5 -5)"/>           </svg></span>
      <span id="topic-desc"><span>Language</span></span>
    </div>
  </div>
</div>