Question

我正在尝试使用通过MYSQL收集的链接在CSS中正确获取SVG徽标。我无法设置链接的样式，因此它们与SVG居中对齐。我已经尝试了添加vertical-align：center的通常技巧，但是并不喜欢那样。我在这里做什么错了？

i.logo {
  position: absolute;
  background: url(http://www.grampianyoga.org.uk/other/lvo.svg) no-repeat;
  top: 0;
  left: 0;
  min-width: 200px;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  background-size: 200px;
  background-position: 50%
}

.logoheader {
  background: transparent;
  color: #fff;
  padding: 20px 60px 20px 100px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  min-height: 200px;
  width: 100%;
}

.logoheader a {
  font-size: 40px;
  line-height: 1.5;
  color: black;
  -ms-flex-item-align: center;
  align-self: center;
  margin: 0 20px 0 0;
}

<nav>
  <div class='logoheader'>
    <i class="logo"></i>
    <a href='page.php'>section</a> | <a href='page.php'>contact</a> |
  </div>
</nav>

Answer 1

如果您唯一需要关注的是将内容垂直居中，则可以使用flexbox。例如，请查看下面所附的代码段。

我将您的图片更改为relative的位置，并将其显示更改为block，然后将它们全部插入了flexbox。

i.logo {
  position: relative; /*changed this*/
  display: block; /*added this*/
  background: url(http://www.grampianyoga.org.uk/other/lvo.svg) no-repeat;
  min-width: 200px;
  height: 200px; /* changed this */
  background-color: rgba(0, 0, 0, .2);
  background-size: 200px;
}

.logoheader {
  background: transparent;
  color: #fff;
  padding: 20px 60px 20px 100px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  min-height: 200px;
  width: 100%;
  display: flex; /*added this*/
  align-items: center;
}

.logoheader a {
  font-size: 40px;
  line-height: 1.5;
  color: black;
  -ms-flex-item-align: center;
  align-self: center;
  margin: 0 20px 0 0;
}

<nav>
  <div class='logoheader'>
    <i class="logo"></i>
    <a href='page.php'>section</a> | <a href='page.php'>contact</a> |
  </div>
</nav>

希望有帮助！

徽标如何与链接对齐？

1 个答案: