代码之家 › 专栏 › 技术社区 › Anjali

将徽标和公司名称放在网页顶部的中心

flexbox css html

Anjali · 技术社区 · 5 年前

我想把公司标志和公司名称放在网页顶部的中心。公司名称也应位于徽标的中心。现在,它位于徽标的底部。这是我目前所拥有的:

<style>
 .logo img {
  width: 100px;
  height: auto;
}

@media (max-width: 1100px) {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .logo img {
    width: 50%;
    height: auto;
  }
}

    </style>

<html>
 <hr style="height:5px;border-width:0;color:gray;background-color:gray" />
        <div class="logo">
            <img src="download.png" /> This is Test Company Name
        </div>
        <hr style="height:12px;border-width:0;color:gray;background-color:gray"/>

</html>

这是图像的样子:

我想把标志和公司名称放在中间。

1 回复 | 直到 5 年前

Shashikant Yadav - Kantbtrue 5 年前

      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
      }
     .logo img {
      width: 100px;
      height: auto;
    }
    
    @media (max-width: 1100px) {
      .logo {
        flex-direction: column; 
        height: 100vh;
      }
    
      .logo img {
        width: 50%;
        height: auto;
      }
    }

<hr style="height:5px;border-width:0;color:gray;background-color:gray" />
<div class="logo">
     <img src="download.png" /> This is Test Company Name
</div>
<hr style="height:12px;border-width:0;color:gray;background-color:gray"/>