CSS: centralize logo with hyperlink

Question

I am super new to HTML and CSS and while studying faced with the issue: I have located logo on the left side and hyperlink on the right side. But, unfortunately, I cannot locate hyperlink on the center (based on logo's center): Output screenshot

CSS:

<style>
    .Logo-Car-With-Text {
      width: 48px;
      height: 48px;
      margin: 0 461px 0 0;
      object-fit: contain;
    }

    .Background {
      width: 900px;
      height: 72px;
      padding: 12px 150px;
      box-shadow: inset 0 -1px 0 0 #e7e7e7;
      background-color: #ffffff;
    }

    .Help-Support {
      width: 91px;
      height: 16px;
      margin: 18px 0 16px 461px;
      font-family: Arial;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.33;
      letter-spacing: 0.2px;
      text-align: right;
      color: #007f00;

    }
  </style>

HTML:

  <div class="Background">
    <img src="images/download.png"  class="Logo-Car-With-Text">

    <a class="Help-Support" href="https://www.google.com/">Help & Support</a>
  </div>

Can you explain a bit more about how you want it to look like? — Aditya Singh, Jun 25 '21 at 16:07

dale landry · Answer 1 · 2021-06-25T16:20:01.437

Use flex for alignment and centering on elements. Place a display: flex on your parent and then add both justify-content: space-between which will place the items on opposing sides of the parent container, then add align-items: center which will vertically align the child elements within the parent.

.Logo-Car-With-Text {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: flex;
  flex: 1;
  justify-content: flex-start;
}

.Background {
  width: 900px;
  height: 72px;
  padding: 12px 150px;
  box-shadow: inset 0 -1px 0 0 #e7e7e7;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Help-Support {
  height: 16px;
  font-family: Arial;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.2px;
  color: #007f00;
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

<div class="Background">
  <img src="https://cdn.logo.com/hotlink-ok/logo-social.png" class="Logo-Car-With-Text">

  <a class="Help-Support" href="https://www.google.com/">Help & Support</a>
</div>

Thanks. It worked, but seems to me distance between logo and link increased, no? — Thomas McKiny, Jun 25 '21 at 16:22
You can change the `justify-content` to `space-around` and play around with the *padding* if you want to adjust the space between elements, or you can just remove the `justify-content` property all together if you'd like. — dale landry, Jun 25 '21 at 16:23

Ali Safari · Answer 2 · 2021-06-25T17:18:42.440

I guess this is what you need:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .nav-content {
                display: inline-block;
                align-items: center;
                background: #12151c;
                font-family: "Poppins", sans-serif;
                width: 100%;
            }
            .nav-logo {
                position: relative;
                display: inline-block;
                justify-content: center;
            }
            .menu-list {
                position: relative;
                display: inline-block;
                min-width: 300px;
                text-align: right;
                right: 5px;
                height: 120px;
                float: right;
            }
            .menu-list ul#menu {
                position: relative;
                width: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 95px;
            }
            #menu li {
                list-style: none;
                padding: 10px 10px;
                margin: 0 0.3vh;
            }
            #menu li a {
                color: white;
                text-decoration: none;
                text-transform: uppercase;
                font-weight: 600;
            }
        </style>
    </head>
    <body>
    <nav class="nav-content">
        <div class="nav-logo">
            <a href="www.google.com">
                <img src="https://i.imgur.com/cBBxvvn.png">
            </a>
        </div>
    
        <div class="menu-list">
            <ul id="menu">
                <li><a href='#'>Help &amp; Support</a></li>
            </ul>
        </div>
    </nav>
    
    </body>
    </html>

CSS: centralize logo with hyperlink

2 Answers2