如何在 div 中将 svg 格式的图像垂直居中？

Question

我想知道如何将我的徽标垂直居中，它恰好是 svg 格式。我不确定它是否比 .jpg 文件有什么不同，但我认为是的。

.main_header {
  background-color: red;
  height: 3.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.main_navigation a {
  color: white;
}

.header_logo {
  float: left;
  position: relative;
}

.header_logo img {
  vertical-align: middle;
}

.main_navigation {
  float: left;
}

<header class="main_header">
  <div class="header_logo">
    <a href="https://www.keeper-club.net/">
      <img src="img/Keeper_Club_Logo.svg" alt="Keeper Club Logo" width="100px" height="100">
    </a>
  </div>
  <nav class="main_navigation">
    <ul>
      <a href="https://www.keeper-club.net/startseite/">Startseite</a>
      <a href="https://www.keeper-club.net/ueber-uns/">Über uns</a>
      <a href="https://www.keeper-club.net/torwarttraining/">Torwarttraining</a>
      <a href="https://www.keeper-club.net/trainer/">Trainer</a>
      <a href="https://www.keeper-club.net/kontakt/">Kontakt</a>
    </ul>
  </nav>
</header>

Answer 1

您可以尝试这样做：

.header_logo {
  display: flex;
  align-items: center;
  justify-center: center;
  position: relative;
  float: left;
}

垂直： 对齐项目：居中；
水平： 对齐内容：居中；

Answer 2

您只需添加：

显示：弹性；
对齐项目：居中；

.main_header {
  background-color: red;
  height: 3.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  display: flex;
  align-items: center;
}

.main_navigation a {
  color: white;
}

.header_logo {
  float: left;
  position: relative;
}

.header_logo img {
  vertical-align: middle;
}

.main_navigation {
  float: left;
}

<header class="main_header">
    <div class="header_logo"> <a href="https://www.keeper-club.net/"> <img src="img/Keeper_Club_Logo.svg"
                alt="Keeper Club Logo" width="100px" height="100"> </a> </div>
    <nav class="main_navigation">
        <ul> <a href="https://www.keeper-club.net/startseite/">Startseite</a> <a
                href="https://www.keeper-club.net/ueber-uns/">Über uns</a> <a
                href="https://www.keeper-club.net/torwarttraining/">Torwarttraining</a> <a
                href="https://www.keeper-club.net/trainer/">Trainer</a> <a
                href="https://www.keeper-club.net/kontakt/">Kontakt</a> </ul>
    </nav>
</header>

如何在 div 中将 svg 格式的图像垂直居中？

How to vertically center an img as svg format in a div?

html

css

vertical-alignment