Question

我只想显示徽标下方的边框。但我不知道该怎么做。我试图尝试，但它似乎不适合我。以下是我在项目网站上使用的代码。非常感谢您的回答。

＆＃13;

.logo {
  position: relative;
  display: block;
}

div .logopix {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%);
  height: 7rem;
  clear: both;
}

.menu {
  display: block;
  border: 2rem red solid;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link type="text/css" rel="stylesheet" href="design.css">
  <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Poppins|Roboto|Ubuntu" rel="stylesheet">
  <title>HUB Motivator</title>
</head>

<body>

  <header>
    <div class="logo">
      <img class="logopix" src="http://via.placeholder.com/50x50" alt="HUB Motivator Logo">
    </div>
    <div class="menu"></div>
  </header>
  <main></main>
  <!-- <footer>&copy; Copyright 2018</footer> -->
</body>

</html>

＆＃13;

Answer 1

由于你的徽标图片中的position:absolute css ...绝对定位元素已从正常文档流中删除，这就是为什么它不会在你的DOM中占用任何空间......

因此，请移除绝对位置并将text-align:center放入logo课程中以使图像居中...

＆＃13;

.logo {
  position: relative;
  display: block;
  text-align: center;
}

.menu {
  display: block;
  border: 2rem red solid;
}

＆＃13;

<header>
  <div class="logo">
    <img class="logopix" src="http://via.placeholder.com/50x50" alt="HUB Motivator Logo">
  </div>
  <div class="menu"></div>
</header>
<main></main>

＆＃13;

Answer 2

删除css中的位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="design.css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Poppins|Roboto|Ubuntu" rel="stylesheet">
    <title>HUB Motivator</title>
  </head>

  <body>

    <header>
    <center>
      <div class="logo">
        <img class="logopix" src="./images/logo.png" alt="HUB Motivator Logo" >
      </div>
     </center>
      <div class="menu">

      </div>

    </header>

    <main>


    </main>


    <!-- <footer>&copy; Copyright 2018</footer> -->

  </body>
</html>

CSS中的

.logo {
  position: relative;
  display: block;
 }

 div .logopix {
   margin: 0;
   height: 7rem;
   clear: both;
   }

.menu {
  display: block;
  border: 2rem red solid;
}

这里是小提琴https://jsfiddle.net/j0p3ueym/3/

Answer 3

Here是JSfiddle

我使用了“之后”并添加了以下代码

div:after {
content: "";
display: block;
height: 10px;
background-color:red;
background-repeat: no-repeat;
background-position: left bottom;
}

如何在我的徽标下面显示项目？

3 个答案: