徽标和导航不会在标题

时间：2017-03-08 19:10:16

标签： html css css3

我创建了一个显示this problem here

的codepen

＆＃13;
＆＃13; 
* {
  padding: 0;
  margin: 0;
}

html,
body {
  font-family: Helvetica;
  background-color: #F4F2E9;
}

header {
  background-color: #A3C5C3;
  margin-bottom: 25px;
  text-align: center;
}

.logo img {
  width: 200px;
  height: 194px;
}

nav {
  height: 50px;
  background-color: #333D51;
  display: flex;
  justify-content: center;
}

.navbar li {
  float: left;
  list-style-type: none;
}

.navbar li a {
  color: #fff;
  font-size: 16px;
  line-height: 3em;
  padding: 0 35px;
  text-decoration: none;
  text-transform: uppercase;
}

.navbar li a:hover:not(.active) {
  text-decoration: underline;
}

.navbar li.active a {
  text-decoration: underline;
}

section {
  width: 800px;
  margin: 0 auto;
}

.categories {
  float: left;
  margin-right: 30px;
}

.categories h2 {
  margin-bottom: 15px;
}

.categories li {
  list-style-type: none;
  font-size: 21px;
  border: none;
  border-bottom: 3px solid #333D51;
}

.category-button {
  display: block;
  color: #000;
  font-size: 18px;
  text-decoration: none;
  width: 150px;
  padding: 25px 10px;
  text-align: center;
}

.category-button:hover {
  background-color: #D2AC2B;
}

.category-button-initial {
  cursor: default;
  background-color: #D2AC2B;
}

.products {
  width: 600px;
  float: left;
}

.products h2 {
  text-transform: uppercase;
}

.products ul {
  width: 100%;
  margin: 10px 0;
}

.products li {
  list-style-type: none;
  background: #dcdbdb;
  min-height: 133px;
  margin: 10px 0;
  padding: 15px;
}

.products img {
  display: block;
  float: left;
  height: 133px;
  width: 200px;
}

.products div {
  display: inline-block;
  padding: 0 15px;
  width: 240px;
  /* changed 2-3*/
  float: left;
  /* changed*/
}

.product-title {
  display: block;
  font-weight: 900;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.product-price {
  display: block;
  font-size: 12px;
  font-weight: 900;
  padding-top: 5px;
}

footer {
  font-size: 14px;
  background-color: #A3C5C3;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  padding: 25px;
}
＆＃13; 
<link rel="stylesheet" type="text/css" href="./coderthreads.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./coderthreads.js"></script>
<header>
  <div class="logo">
    <img src="https://i.imgsafe.org/0b526260fb.png" alt="Coder Threads Logo">
  </div>
  <nav>
    <ul class='navbar'>
      <li>
        <a href='#'>Home</a>
      </li>
      <li class='active'>
        <a href='#'>Shop</a>
      </li>
      <li>
        <a href='#'>Store Locator</a>
      </li>
    </ul>
  </nav>
</header>
<section>
  <div class='categories'>
    <h2>Categories</h2>
    <ul>
      <li><a href='#shirts' class='category-button category-button-initial'>Shirts</a></li>
      <li><a href='#pants' class='category-button'>Pants</a></li>
      <li><a href='#accessories' class='category-button'>Accessories</a></li>
    </ul>
  </div>
  <div id='shirts' class='products'>
    <h2>Shirts</h2>
    <ul>
      <li id="prod1">
        <img src="https://i.imgsafe.org/13de3c2e5e.png" alt="Women's Classic T-Shirt">
        <div>
          <span class="product-title">Women's Classic T-Shirt</span>
          <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
          <span class="product-price">$10.00</span>
        </div>
      </li>
      <li id="prod2">
        <img src="https://i.imgsafe.org/141af47f49.png" alt="Men's Leather Jacket">
        <div>
          <span class="product-title">Men's Leather Jacket</span>
          <span class="product-description">Lorem ipsum dolor sit amet, sed lectus sagittis est congue, eu adipiscing amet libero. Luctus enim ante massa felis amet ac, omnis integer, aliquam viverra amet ornare sed, sed voluptate placerat enim tellus elit.</span>
          <span class="product-price">$55.00</span>
        </div>
      </li>
      <li id="prod3">
        <img src="https://i.imgsafe.org/1421c7aae2.png" alt="Women's Gray Hooded Sweatshirt">
        <div>
          <span class="product-title">Women's Gray Hooded Sweatshirt</span>
          <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sitipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
          <span class="product-price">$35.00</span>
        </div>
      </li>
      <li id="prod4">
        <img src="https://i.imgsafe.org/14240b9f18.png" alt="Men's Athletic Compression Top">
        <div>
          <span class="product-title">Men's Athletic Compression Top</span>
          <span class="product-description">Lorem ipsum dolor sit amet.</span>
          <span class="product-price">$45.00</span>
        </div>
      </li>
    </ul>
  </div>
  <div id='pants' class='products'>
    <h2>Pants</h2>
    <ul>
      <li id="prod5">
        <img src="https://i.imgsafe.org/14f6c3d696.png" alt="Men's Olive Chinos">
        <div>
          <span class="product-title">Men's Olive Chinos</span>
          <span class="product-description">Lorem ipsum dolor sit amet.</span>
          <span class="product-price">$45.00</span>
        </div>
      </li>
      <li id="prod6">
        <img src="https://i.imgsafe.org/210b60d480.png" alt="Women's Distressed Jeans">
        <div>
          <span class="product-title">Women's Distressed Jeans</span>
          <span class="product-description">Lorem ipsum dolor sit amet, sed lectus sagittis est congue, eu adipiscing amet libero. Luctus enim ante massa felis amet ac, omnis integer, aliquam viverra amet ornare sed, sed voluptate placerat enim tellus elit.</span>
          <span class="product-price">$50.00</span>
        </div>
      </li>
      <li id="prod7">
        <img src="https://i.imgsafe.org/14f86a5ef4.png" alt="Women's Skinny Mid Tone Jeans">
        <div>
          <span class="product-title">Women's Skinny Mid Tone Jeans</span>
          <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
          <span class="product-price">$40.00</span>
        </div>
      </li>
    </ul>
  </div>
  <div id='accessories' class='products'>
    <h2>Accessories</h2>
    <ul>
      <li id="prod8">
        <img src="https://i.imgsafe.org/1508f24253.png" alt="Leather Book Bag">
        <div>
          <span class="product-title">Leather Book Bag</span>
          <span class="product-description">Lorem ipsum dolor sit amet.</span>
          <span class="product-price">$55.00</span>
        </div>
      </li>
      <li id="prod9">
        <img src="https://i.imgsafe.org/1508dc9fb3.png" alt="Laptop Bag">
        <div>
          <span class="product-title">Laptop Bag</span>
          <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</span>
          <span class="product-price">$40.00</span>
        </div>
      </li>
      <li id="prod10">
        <img src="https://i.imgsafe.org/1508d3b63e.png" alt="Five Panel Hat">
        <div>
          <span class="product-title">Five Panel Hat</span>
          <span class="product-description">Lorem ipsum dolor sit amet, sed lectus sagittis est congue, eu adipiscing amet libero. Luctus enim ante massa felis amet ac, omnis integer, aliquam viverra amet ornare sed, sed voluptate placerat enim tellus elit.</span>
          <span class="product-price">$30.00</span>
        </div>
      </li>
      <li id="prod11">
        <img src="https://i.imgsafe.org/1508c85d59.png" alt="Apple Watch">
        <div>
          <span class="product-title">Apple Watch</span>
          <span class="product-description">Lorem ipsum dolor sit amet.</span>
          <span class="product-price">$199.99</span>
        </div>
      </li>
    </ul>
  </div>
</section>
<footer>
  ~ don't code without your threads ~
</footer>
＆＃13;
＆＃13;
＆＃13;

我正尝试使用以下方法将导航与蓝色标题中的导航居中：

nav {
  height: 50px;
  background-color: #333D51;
  display: flex;
  justify-content: center;
}

以及将justify-content:center;替换为text-align:center;

然而导航不是居中的。任何关于此的提示都会很棒。

3 个答案:

答案 0 :(得分：0)

你的footer元素搞乱了。 将box-sizing: border-box;添加到页脚或将填充更改为25px 0px

答案 1 :(得分：0)

如果我理解正确，问题是：

图像是问题，即徽标不在图像的中心。

所以你需要做的就是正确地摆正图像。

一旦png图像的实际徽标居中，那么我会看裁剪说200x200或者什么，但徽标不在实际图像的中心，即与样式或html无关

答案 2 :(得分：0)

看起来问题是链接都是不同的大小，因此它们不居中。如果你添加使用flexbox并添加这样的东西它应该工作：

.navbar {
  display:flex;
  justify-content:center;
}
.navbar li {
  flex-grow:1;
  flex-basis0;
}
相关问题
最新问题