0

I want to center the company logo and the name of the company on top of the web page. The name of the company should also be at the center of the logo. Right now, it is at the bottom of the logo. This is what I have so far:

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

This is how the image looks like:

enter image description here

I want to center the logo and the company name.

Anjali
  • 2,540
  • 7
  • 37
  • 77

1 Answers1

1

      .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"/>
Shashikant Yadav - Kantbtrue
  • 808
  • 6
  • 12