将文字与图片水平对齐

2024-05-04 • 问答

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

将文字与图片水平对齐

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

将文字与图片水平对齐

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

我尝试过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>

正如已经提到的RickardElimää，您的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>

尝试这个答案。

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>

enter image description here使用此CSS

#logo img{
     margin:0 auto;
     display:table;

}

将文字与图片水平对齐

hoyob 回答：将文字与图片水平对齐

大家都在问