html - 将文本与图像在同一水平对齐

Question

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

但我无法让它工作，这就是我目前所拥有的：

我希望左边的标志和我上传的第一张图片一样，有人知道怎么做吗？

我尝试了vertical-align: middlewhich 不起作用，然后我尝试了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>

标签： htmlcss

Answer 1

正如已经提到的 Rickard Elimää，您的 CSS 目标是#logo，但您的 id 显示为“Logo”。

我们还必须把       

flex-direction: column;

以及其他一些调整以使其正常工作。

我还在 css 徽标中创建了图形元素，因为它非常简单，如果你想要一个图像而不是伪元素，你可以将它放在h1中，如下所示：

<h1><img src="path_to.png" alt="i">Dublin apps</h1>

并删除伪元素的 css 规则。

#Logo h1:before

您需要更改徽标字体以匹配图像中的字体

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;
    }


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

    #Logo {
      display: flex;
      justify-content: space-around;
      color: white;
      flex-direction: column;
    }

#Logo h1, #Logo h3 {
  margin: 0;
}

#Logo h1 {
  font-size: 24px;
  display: flex;
  align-items: center;
  font-weight: 300;
}

#Logo h3 {
  font-size: 14px;
  padding-left: 24px;
  font-weight: 300;
}

#Logo h1:before {
  content: "i";
  display: inline-block;
  font-size: 14px;
  color: black;
  background-color: white;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50% 0 50% 50%;
  margin-right: 4px;
}

<img src="https://i.stack.imgur.com/NPCDE.png" alt="">
<header>
      <div id="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>