如何在导航栏中将图像居中

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;
}

如何使用位置？

1. 静态。使用标准文档流程。

2. 浮动。浮动容器或元素（并且始终清除浮动）。

3. 无流量定位。使用绝对或固定定位从流中移除元素。

参考：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>