如何将徽标与链接对齐?

Question

我正在尝试使用通过MYSQL收集的链接在css中正确获取SVG徽标。我无法设置链接的样式，以便它们与 SVG 居中对齐。我已经尝试了添加垂直对齐：中心的常用技巧，但它不喜欢这样。我在这里做错了什么？

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，然后将它们全部插入弹性框中。

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>

希望对您有所帮助！