CODEWITHSUNDEEP
htmlcssnav
Abhiraj SB
Abhiraj SB

Reputation: 113

How can I align nav buttons next to each other in middle of the page with my image in the centre?

My aim is to get my NAV bar buttons next to each other in the centre of the page like this :

enter image description here

Plus my image is not centering for some reason.

@font-face {
  src: url(font/BebasNeue-Regular.ttf);
  font-family: "Bebas Neue";
}

body {
  background-color: #eeeeee;
  font-family: 'Bebas Neue', cursive;
}

li {
  list-style-type: none;
  padding: 0%;
  margin: 0%;
}

#header {
  align-content: center;
}

#nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: inline-block;
}
<header id="header">
  <img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
  <nav id="nav-bar">
    <ul>
      <li><a href="#About" class="nav-link">About</a></li>
      <li><a href="#Work" class="nav-link">How it works</a></li>
      <li><a href="#Pricing" class="nav-link">Pricing</a></li>
    </ul>
  </nav>
</header>
<section id="About">
  <iframe src="https://youtu.be/ISZLTJH5lYg" frameborder="0" title="Video about Multi-Vitamins" allowfullscreen></iframe>
</section>
<section id="work"></section>
<section id="Pricing"></section>
<form id="form" action=" https://www.freecodecamp.com/email-submit">
  <input name="email" id="email" type="email" placeholder="enter your email here" required />
  <input name="submit" id="submit" type="submit" />
</form>

Upvotes: 3

Views: 385

Answers (2)

Deepak Verma
Deepak Verma

Reputation: 71

you can use display: flex for header, and the align-items to horizontally align them in the center. and to align your nav items next to each other, you can give them display: inline-block;

@font-face {
  src: url(font/BebasNeue-Regular.ttf);
  font-family: "Bebas Neue";
}
body {
  background-color: #eeeeee;
  font-family: 'Bebas Neue', cursive;
}
li {
  list-style-type: none;
  display: inline-block;
}
ul{
  padding:0;
}
#header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#nav-bar{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="plp.css" />
    <title>Multi-Vitamins</title>
  </head>
  <body>
    <header id="header">
       <img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
      <nav id="nav-bar">
        <ul>
          <li><a href="#About" class="nav-link">About</a></li>
          <li><a href="#Work" class="nav-link">How it works</a></li>
          <li><a href="#Pricing" class="nav-link">Pricing</a></li>
        </ul>
      </nav>
     
      <div></div>
    </header>
    <section id="About">
      <iframe
        src="https://youtu.be/ISZLTJH5lYg"
        frameborder="0"
        title="Video about Multi-Vitamins"
        allowfullscreen
      ></iframe>
    </section>
    <section id="work"></section>
    <section id="Pricing"></section>
    <form id="form" action=" https://www.freecodecamp.com/email-submit">
      <input
        name="email"
        id="email"
        type="email"
        placeholder="enter your email here"
        required
      />
      <input name="submit" id="submit" type="submit" />
    </form>
  </body>
</html>

strong text

Upvotes: 1

isherwood
isherwood

Reputation: 61083

You're missing a couple things. Firstly, set the list items to an inline layout:

li {
    ...
    display: inline-block;
}

Then, align-content doesn't work unless you also use flex layout:

#header {
    display: flex;
    ...
}

That gets you close. Refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox for help getting the spacing like you want it.

Upvotes: 0

Related Questions