CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anthony Hulett
Anthony Hulett

Reputation: 57

How do I get the links centered to the image in a navbar instead of being on top?

    <!DOCTYPE html>
<html>
    <head>
        <title>Funky Munky Arcade</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

        <nav class="navbar navbar-default navbar-fixed-top">

            <div class="container">

                <div class="navbar-header">

                    <a href="/index.html" class="navbar-left"><img src="FMA_Logo.png" class="logo"></a>

                </div>

                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Parties</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>

            </div>

        </nav>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>
</html>

This is what I have so far. I have a link to a style sheet of my own that currently has no style. Just html so far. I am trying to get it to where the links are centered with the image instead of being at the top. I'd rather not use padding if possible.

Upvotes: 0

Views: 33

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

You can add a class to the parent, and set it to display: flex; align-items: center; to center the elements vertically.

.nav-container {
  display: flex;
  align-items: center;
}
<!DOCTYPE html>
<html>

<head>
  <title>Funky Munky Arcade</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container nav-container">

      <div class="navbar-header">

        <a href="/index.html" class="navbar-left"><img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="logo"></a>

      </div>

      <ul class="nav nav-justified">
        <li><a href="#">Home</a></li>
        <li><a href="#">Parties</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

    </div>

  </nav>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Upvotes: 2

Related Questions