如何在导航栏中居中图像

时间：2017-05-21 18:11:21

标签： html css twitter-bootstrap navbar

所以我想将我的徽标放在我的导航栏中，如附图所示，但由于某种原因它不起作用请帮帮我

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

1 个答案:

答案 0 :(得分：0)

向上移动徽标元素并使用以下内容： 使用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.   

  2. 浮动。浮动容器或元素（并且总是清除浮子）。

    3.   

  3. Out of Flow Positioning。使用绝对或固定定位从流中删除元素。

    4.         

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

＆＃13;
＆＃13; 
@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 {}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题