如何使导航栏中的图像居中

Question

所以我想将我的徽标置于导航栏的中央，如附图所示，但由于某些原因它不太有效请帮助我

css

@font-face {
  font-family: "Metropolis";
  src: url('../fonts/metropolis.otf') format('opentype');
}

body {
  background-color: #cfd8dc;
}

.nav {
  height: 140px;
  background-color: #1a237e;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.nav li {
  display: inline-block;
}

#logo {
  height: 195px;
  width: 195px;
  margin: 0 auto;
  display: block;
  position: static;
  z-index: 100000;
}

.logo {
  width: 195px;
  height: 195px;
  border-radius: 50%;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.navitem {
  font-size: 24px;
  color: #c5cae9;
  font-family: Verdana, Geneva, sans-serif;
  padding: 60px 15px !important;
  display: inline-block !important;
  background-color: transparent !important;
}

.icon {
  height: 16px;
  width: 16px;
  margin-left: 45px;
  margin-bottom: 7px;
  padding: 0 !important;
}

.nav li:hover {
  border-bottom: 2px solid #ff5722;
  background-color: none;
  height: 140px;
  width: initial;
}

.nav a:hover {
  color: #c5cae9;
}

h1 {
  font-size: 48px;
  margin-left: 62px;
  font-family: Metropolis, sans-serif;
  position: absolute;
  color: #ff5722;
}

#banner {
  width: 100%;
  margin-bottom: 100px;
}

.artiekel {
  background-color: #e3f2fd;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekelhead {
  text-align: center;
  font-family: Metropolis, sans-serif;
  font-size: 48px;
  color: #ff5722;
  background-color: #1a237e;
  height: 105px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekeltext {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #5c6bc0;
}

.artiekeldiv {
  margin: 0;
}

hr {
  border-top: 2px solid #ff5722;
}

.artiekeltext a {}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link rel="icon" type="image/png" href="images/favicon.png" />



  <div class="containter">
    <div class="row">
      <ul class="col-md-12 nav">
        <li><img class="icon" src="images/home.svg"><a class="navitem" href="index.php">Home</a></li>
        <li><img class="icon" src="images/presentatie.svg"><a class="navitem" href="presentatie.php">Presentatie</a></li>
        <img id="logo" class="logo" href="index.php" src="images/Logo.svg">
      </ul>
    </div>
    <div class="row">
      <h1>Home</h1>
      <img id="banner" class="img-responsive" src="images/banner1.jpg">
    </div>
    <div class="row artiekeldiv">
      <div class="col-md-6">
        <div class="artiekelhead">
          Welkom
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
       Lees Meer »
      </a>
        </div>
      </div>
      <div class="row artiekeldiv">
        <div class="col-md-6">
          <div class="artiekelhead">
            info
          </div>
          <div class="artiekeltext artiekel">
            <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley
              fire in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black
              jack bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
            <hr>
            <a href="#">
      Lees Meer »
     </a>
          </div>
        </div>
      </div>
    </div>
  </div>

还有我想创建但不能创建的图像 this is some kind of mock-up/wire frame of the page i'm making

Answer 1

将徽标元素向上移动并使用以下内容：使用 position: absolute; 以便您可以使用 left: calc((100% - 195px) / 2);

控制位置

#logo {
  height: 195px;
  width: 195px;
  margin: 0 auto;
  display: block;
  position: absolute;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
}

How to use position?

Static. Work with the standard document flow.

Floats. Float containers or elements (and always clear floats).

Out of Flow Positioning. Use absolute or fixed positioning to remove elements from the flow.

ref: https://teamtreehouse.com/community/when-do-i-use-absolute-positioning-and-when-do-i-use-relative-positioning

@font-face {
  font-family: "Metropolis";
  src: url('../fonts/metropolis.otf') format('opentype');
}

body {
  background-color: #cfd8dc;
}

.nav {
  height: 140px;
  background-color: #1a237e;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.nav li {
  display: inline-block;
}

#logo {
  height: 195px;
  width: 195px;
  margin: 0 auto;
  display: block;
  position: absolute;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
}

.logo {
  width: 195px;
  height: 195px;
  border-radius: 50%;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.navitem {
  font-size: 24px;
  color: #c5cae9;
  font-family: Verdana, Geneva, sans-serif;
  padding: 60px 15px !important;
  display: inline-block !important;
  background-color: transparent !important;
}

.icon {
  height: 16px;
  width: 16px;
  margin-left: 45px;
  margin-bottom: 7px;
  padding: 0 !important;
}

.nav li:hover {
  border-bottom: 2px solid #ff5722;
  background-color: none;
  height: 140px;
  width: initial;
}

.nav a:hover {
  color: #c5cae9;
}

h1 {
  font-size: 48px;
  margin-left: 62px;
  font-family: Metropolis, sans-serif;
  position: absolute;
  color: #ff5722;
}

#banner {
  width: 100%;
  margin-bottom: 100px;
}

.artiekel {
  background-color: #e3f2fd;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekelhead {
  text-align: center;
  font-family: Metropolis, sans-serif;
  font-size: 48px;
  color: #ff5722;
  background-color: #1a237e;
  height: 105px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekeltext {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #5c6bc0;
}

.artiekeldiv {
  margin: 0;
}

hr {
  border-top: 2px solid #ff5722;
}

.artiekeltext a {}

<!doctype html>
<html lang "nl">

<head>
  <meta charset="utf-8">
  <meta name="description" content="voorbeeld paginna">
  <meta name="keywords" content="HTML code">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="Michael Rotteveel">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home | Math-Mate</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link rel="icon" type="image/png" href="images/favicon.png" />
</head>

<body>
  <div class="containter">
    <img id="logo" class="logo" href="index.php" src="http://placehold.it/150x150">
    <div class="row">
      <ul class="col-md-12 nav">
        <li><img class="icon" src="images/home.svg"><a class="navitem" href="index.php">Home</a></li>
        <li><img class="icon" src="images/presentatie.svg"><a class="navitem" href="presentatie.php">Presentatie</a></li>

      </ul>
    </div>
    <div class="row">
      <h1>Home</h1>
      <img id="banner" class="img-responsive" src="images/banner1.jpg">
    </div>
    <div class="row artiekeldiv">
      <div class="col-md-6">
        <div class="artiekelhead">
          Welkom
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
       Lees Meer »
      </a>
        </div>
      </div>
      <div class="col-md-6">
        <div class="artiekelhead">
          Welkom
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
       Lees Meer »
      </a>
        </div>
      </div>
    </div>
    <div class="row artiekeldiv">
    <div class="col-md-6">
        <div class="artiekelhead">
          info
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
      Lees Meer »
     </a>
        </div>
      </div>
      <div class="col-md-6">
        <div class="artiekelhead">
          info
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
      Lees Meer »
     </a>
        </div>
      </div>
    </div>
  </div>
</body>

如何使导航栏中的图像居中

How to center an image in navbar

html

css

navbar

twitter-bootstrap