Question

我正试图把我的＆＃34;桑切斯设计......桑切斯女士......和＃34;网络开发人员，艺术家和高等教育＆＃34;按钮位于页面中间，正好在山顶。我已经研究过并尝试但无法移动它。我认为填充顶部可以做到这一点，但不是。有什么建议？

另外，我正在学习网页开发，所以请保持温和。谢谢！

＆＃13;

  body {
  background-image: url('images/background3.jpeg');
  width: 100%;
  height: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  font-family: 'Lato', sans-serif;
  color: white;
}

@media only screen and (max-width: 767px) {
  body {
    background-image: url('images/background3.jpeg');
  }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://path/to/font-awesome/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
  </style>
  <title>Sanchez</title>
</head>

<body>

  <!--NAVBAR-->
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="">Andrea Designs</a>

      <!--Toggle Button-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span></button>

      <!--Navbar links-->
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <li class="nav-item">
              <a class="nav-link" href="Sanchez_bootstrap_about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Sanchez_bootstrap_artist.html">Artist</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Sanchez_bootstrap_highered.html">Higher Education</a>
            </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <div id="content">
          <h1> Sanchez Designs</h1>
          <h5> Ms. Sanchez is an aspiring Web Developer</h5>
          <hr>
          <ul class="list-inline intro-social-buttons">
            <li class="list-inline-item">
              <a href="Sanchez_Bootstrap_about.html" class="btn btn-dark btn-lg">
                <span class="network-name">Web Developer</span></a>
            </li>

            <li class="list-inline-item">
              <a href="Sanchez_Bootstrap_artist.html" class="btn btn-dark btn-lg">
                <span class="network-name">Artist</span></a>
            </li>

            <li class="list-inline-item">
              <a href="Sanchez_Bootstrap_highered.html" class="btn btn-dark btn-lg">
                <span class="network-name">Higher Education</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  </header>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

＆＃13;

Answer 1

这里有很多方法可以添加填充或边距。

如果您的内容和导航栏有2个不同的容器，只需添加另一个类并为其添加填充，即可向.col-lg-12添加padding-top。

HTML

<div class="col-lg-12 text-center padding-content">
    <div id="content">
        ...

CSS

.padding-content {
    padding-top: 30px;
}

演示：https://www.bootply.com/jpU6nmgw8z

或者您可以为导航栏添加保证金

CSS

.navbar {
    margin-bottom: 30px;
}

演示：https://www.bootply.com/k6vGFbX5XC

Answer 2

如果你想要填充顶部尝试 padding-top : 20px!important

如果您想在中心进行div测试，为什么要尝试填充顶部或底部。你可以使用额外的div并给出样式display: flex; align-items: center;

.banner {
    height: 80vh;
    align-items: center;
    vertical-align: middle;
    display: flex;
}

喜欢：https://www.w3schools.com/code/tryit.asp?filename=FNBF6UP5MV4S

Answer 3

您是否尝试添加margin-top来说明＆＃34;内容＆＃34; DIV？

#content {
  margin-top: 5%;
}

Codepen链接： https://codepen.io/anon/pen/zpRQVL

Padding-top赢了工作

3 个答案: