时间戳

首页 > 解决方案 > 如何将徽标与链接对齐？

html - 如何将徽标与链接对齐？

问题描述

我正在尝试使用通过 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>

标签： htmlcss

解决方案

如果您唯一关心的是将内容垂直居中，则可以使用 flexbox。例如，看看下面的附加片段。

我将您的图像更改为relative位置并将其显示更改为block，然后将它们全部插入到弹性框中。

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>

希望能帮助到你！

推荐阅读