将文字与图片水平对齐

debugcn 发表于 Dev

莫里斯

我想制作一个看起来像这样的徽标：

但我无法使它正常工作，这是我目前所拥有的：

当前徽标

我希望左侧的徽标与我上传的第一张图片相同，有人知道该怎么做吗？

我尝试了vertical-align: middle哪些不起作用display: flex，然后align: center又尝试了，但是那也不起作用。

这是我的尝试：

header {
  padding-top: 24px;
  padding-bottom: 24px;
  background: #1b1b2e;
  width: 100%;
  border-bottom: 1px solid black;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

header a {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  color: white;
}

header img {}

#nav {
  display: flex;
  justify-content: space-around;
}

#logo {
  display: flex;
  justify-content: space-around;
}

<header>
  <div id="Logo"> <img src="img/logo_shape.png" alt="Logo">
    <h1>Dublin apps</h1>
    <h3>Ipad applications</h3>
  </div>
  <div id="nav"> 
    <a href="#">Home</a> <a href="#">Ipad Apps</a> 
    <a href="#">Demonstrations</a> 
    <a href="#">Leogards Media</a>
    <a href="#">connect us</a> 
  </div>
</header>

VSM

试试这个答案。

header {
  padding: 10px 20px;
  background: #1b1b2e;
  width: 100%;
  border-bottom: 1px solid black;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
}

header img {
  width: 25px;
  margin-right: 5px;
}

#nav {
  display: flex;
  justify-content: space-around;
}

#nav a {
  text-decoration: none;
  color: white;
  padding: 3px 5px;
  margin: 0 2px;
}

#nav a.active {
  background-color: #fff;
  color: #111;
  border-radius: 2px;
}

#logo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.logo-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.logo-text h1, .logo-text h3 {
  margin: 0;
  color: #fff;
}

.logo-text h1 {
  font-size:16px;
}

.logo-text h3 {
  font-size:14px;
}

<header>
  <div id="logo">
    <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/512x512/plain/leaf.png" alt="Logo">
    <div class="logo-text">
      <h1>Dublin apps</h1>
      <h3>Ipad applications</h3>
    </div>
  </div>
  <div id="nav"> 
    <a href="#">Home</a> <a href="#">Ipad Apps</a> 
    <a href="#" class="active">Demonstrations</a> 
    <a href="#">Leogards Media</a>
    <a href="#">connect us</a> 
  </div>
</header>