Pure CSS header items aligned horizontally and vertically-CodePudding

I am new to CSS and I know there is a better/easier solution with Flexbox but I'm trying to understand the basics of CSS. Therefore I am trying to align the header items:

a logo image with a text on the left side - text should be vertically aligned in the middle
a nav menu on the right aligned with the text on the left side.

Here is my code:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

.logo a {
  color: black;
  text-decoration: none;
}
.logo img {
  height: 100px;
  width: 100px;
}

nav a {
  color: black;
  text-decoration: none;
}

header {
  background-color: #D5D4D4;
}
header .logo {
  border: 2px solid yellow;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
header nav {
  border: 3px solid red;
  display: inline-block;
}

<body>

<header>
  <div class="logo">
    <a href="/">
      <img src="" alt="brand logo (100X100 px)" class="logo">
      <span>brand name</span>
    </a>
  </div>

  <nav>
    <a href="/">Products</a>
    <a href="/">About</a>
    <a href="/">Contact</a>
    <a href="/">Free Trial</a>
    <a href="/">Free Trial</a>
  </nav>

</header>

<div class="content">
  Page content
</div>

</body>

I have 2 questions:

Why are the nav a items vertically aligned? I apply vertical-align: middle only to the header .logo box.
How to I move the nav to the right? (if I use float then vertical-align will not work. Any clean, pure CSS solution is fine.

CodePudding user response：

nav a is currently a child-element of header. So by applying vertical-align: middle to the header, it will inherently also affect nav a. By moving nav outside of header-tags, it will not inherent the applied CSS code.
To align the nav-items to the right without the use of Flexbox, you can use for example: position: relative and alter the position manually with the use of left: XX% of right: XX%. These two attributes mean: what percentage you want to move away from that direction. For example, by using left: 100% you are moving to affected items 100% away from the left-side of the window.

In my code snippet, i also added a solution of applying text below of an image with the use of figure and figcaption in HTML, by putting img and figcaption inside of figure. This way, CSS doesn't have to be applied to align the text for the logo.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

.logo a {
  color: black;
  text-decoration: none;
}
.logo img {
  height: 100px;
  width: 100px;
}

nav a {
  color: black;
  text-decoration: none;
  position: relative;
  left: 56%;
}

header {
  background-color: #D5D4D4;
}
header .logo {
  border: 2px solid yellow;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
header nav {
  border: 3px solid red;
  display: inline-block;
}

<body>

<header>
  <div class="logo">
    <a href="/">
      <figure>
          <img src="" alt="brand logo (100X100 px)" class="logo">
          <figcaption>brand name</figcaption>
      </figure>
    </a>
  </div>
</header>
    <nav>
        <a href="/">Products</a>
        <a href="/">About</a>
        <a href="/">Contact</a>
        <a href="/">Free Trial</a>
        <a href="/">Free Trial</a>
  </nav>
<div class="content">
  Page content
</div>

</body>

CodePudding user response：

I don't quite understand what you mean by

a logo image with a text on the left side - text should be vertically aligned in the middle

because the brand logo and name actually already vertically aligned, so it's better if you provide your own brand logo. Or do you mean "horizontally" aligned?

As your second question about the nav, try to use flex. Here's my best attempt to answer your question:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

.logo a {
  color: black;
  text-decoration: none;
}
.logo img {
  width: 100px;
}

nav a {
  color: black;
  text-decoration: none;
  display: flex;
  flex-direction: row;
}

header {
  background-color: #D5D4D4;
}
header .logo {
  border: 2px solid yellow;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
header nav {
  border: 3px solid red;
  display: inline-block;
}

.column{
  column-count:2;
}

<body>

<header>
<div class="column">
  <div class="logo">
    <a href="/">
      <img src="https://images.unsplash.com/photo-1549924231-f129b911e442?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="brand logo (100X100 px)" class="logo">
      <span>brand name</span>
    </a>
  </div>

  <nav>
    <a href="/">Products</a>
    <a href="/">About</a>
    <a href="/">Contact</a>
    <a href="/">Free Trial</a>
    <a href="/">Free Trial</a>
  </nav>
</div>
</header>

<div class="content">
  Page content
</div>

</body>

CodePudding user response：

User Taroti has explained your question #1 (the vertical-align: middle gets inherited to all other elements within the header block, and besides, wouldn't that be necessary? If you want to align the logo to be vertically centered in the header, then it will of course depend on relative positioning with all the contents of the header). For #2, moving the nav to the right, you may likely want the nav to remain in the header block, so you could instead add left margin ("margin-left") to it, thus pushing it if you will to the right (by inserting X amount of margin in between it and whatever preceding inline element, in this case the logo block (inline)).

From trial and error (using chrome dev tools) I found a value of 14% to work rather nicely across all likely ranges of screen sizes - from as small as phones to 2,000px-width screen. This is why it is much better to use percentage (i.e., relative value) than explicit (i.e., an explicitly defined number of px) for scaling reasons depending on the end-users screen size in pixel dimensions...

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

.logo a {
  color: black;
  text-decoration: none;
}
.logo img {
  height: 100px;
  width: 100px;
}

nav a {
  color: black;
  text-decoration: none;
}

header {
  background-color: #D5D4D4;
}
header .logo {
  border: 2px solid yellow;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
header nav {
  border: 3px solid red;
  display: inline-block;
  margin-left: 14%;
}

<body>

<header>
  <div class="logo">
    <a href="/">
      <img src="" alt="brand logo (100X100 px)" class="logo">
      <span>brand name</span>
    </a>
  </div>

  <nav>
    <a href="/">Products</a>
    <a href="/">About</a>
    <a href="/">Contact</a>
    <a href="/">Free Trial</a>
    <a href="/">Free Trial</a>
  </nav>

</header>

<div class="content">
  Page content
</div>

</body>