Question

是的，我是编码的新手，我不知道我会怎么做。正如您所看到的，标题和段落只是位于我的导航栏上方，我想要做的是，导航栏位于最顶部，然后是屏幕中间的文本，而不仅仅是与中心顶部对齐区域。

老实说，我几乎不知道我在做什么，并且想知道这里有人能帮忙吗？

为了避免任何混淆，我正在谈论＆＃34;关于我们＆＃34;底部的部分。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> About us </title>

  <body background="backgroundimagebase.jpg" </head>
    <body>
      <style>
        body {
          margin: 0;
          font-family: 'Work Sans', sans-serif;
          font-weight: 300;
        }
        
        .container {
          width: 80% margin: 0 auto;
        }
        
        header {
          background: #7D7D7D;
        }
        
        header::after {
          content: '';
          display: table;
          clear: both;
        }
        
        .logo {
          display: inline-block;
          margin-left: -4px;
        }
        
        nav {
          display: inline-block
        }
        
        nav ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        
        nav li {
          display: inline-block;
          margin-left: 60px;
          padding-top: 0px;
        }
        
        nav a {
          color: #444;
          text-decoration: none;
          text-transform: uppercase;
          font-size: 18px;
        }
        
        nav a:hover {
          color: #000;
        }
        
        nav a::before {
          content: '';
          display: block;
          height: 5px width: 100%;
          background-color: #444;
          position: absolute;
          top: 0;
          width: 0%;
          transition: all ease-in-out 250ms;
        }
      </style>

      <article style="margin:20px">
        <font color="white">
          <h1>About us:</h1>
          <p align="middle">

            </br>
            </br>

            <br>
            </br>
          </p>
        </font>
      </article>

      <!-- Logo and navbar-->
      <header>
        <div class="container">

          <img src="evolutionlogo.jpg" />

          <nav>
            <ul>
              <li><a href="projectwebsite.html">Home</a></li>
              <li><a href="projectwebsite2.html">About</a></li>
              <li><a href="projectwebsite3.html">Games</a></li>
              <li><a href="projectwebsite4.html">Hardware</a></li>
              <li><a href="projectwebsite5.html">Contact</a></li>
            </ul>
          </nav>
        </div>
      </header>


    </body>

</html>

＆＃13;

Answer 1

自从前端开发开始以来，将元素垂直和水平放置在中间是一个臭名昭着的问题。幸运的是，我们可以使用新工具来实现这一目标。请尝试使用flexbox来实现此目的。

这不是处理代码质量的最佳方式，但我尝试尽可能少地进行更改。（这也不是为了侮辱你的代码，我们都必须从某个地方开始）

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> About us </title>
<style>
body {
 margin: 0;
 font-family: 'Work Sans', sans-serif;
 font-weight: 300;
}

.container {
 width: 80%
  margin: 0 auto;
}

header {
 background: #7D7D7D;
 }

 header::after {
 content: '';
 display

: table;
 clear: both;
}

.logo {
 display: inline-block; margin-left: -4px;
}

nav { 
 display: inline-block
}

nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

nav li {
 display: inline-block;
 margin-left: 60px;
 padding-top: 0px;

}

nav a {
 color: #444;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 18px;
}

nav a:hover {
 color: #000;
}

nav a::before {
 content: '';
 display: block;
 height: 5px;
 width: 100%;
 background-color:#444;


 position: absolute;
 top: 0;
 width: 0%;

transition: all ease-in-out 250ms;
}

.middle {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
</head>
<body background="backgroundimagebase.jpg" style="height: 100%;">
<!-- Logo and navbar-->
<header>
    <div class="container">

    <img src="evolutionlogo.jpg"/>

    <nav>
      <ul>
        <li><a href="projectwebsite.html">Home</a></li>
        <li><a href="projectwebsite2.html">About</a></li>
        <li><a href="projectwebsite3.html">Games</a></li>
        <li><a href="projectwebsite4.html">Hardware</a></li>
        <li><a href="projectwebsite5.html">Contact</a></li>
       </ul>
    </nav>
    </div>
    </header>

    <article class="middle" style="margin:20px">

<h1>About us:</h1>
     <p align="middle" >
        Example text
     </br>
    </br>

     <br>
    </br>
    </p>
</article>

 </body>

</html>

主要区别是：

班级。中庸：

.middle {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

高度：100vh也相对较新。它强制元素为“视图高度”的100％。这是一种快速实现这一目标的方法，无需创建一堆高度：100％css属性。

然后，您会看到实际进行居中的新Flexbox功能。希望这会有所帮助。

我如何在导航栏下移动我的第一个标题和段落？

1 个答案: