Question

我有一个使用bootstrap的单页滚动网站。在标题部分中有一个徽标图像，该图像应该保持在该部分底部的中心位置。然而，图像始终保持在顶部

HTML：

<header>
        <a class="page-scroll" href="#about">
            <div class="logo container"> <img src="img/logo_black.png" alt="logo"></div>
        </a>
    </header>

CSS：

header {
    position:relative;
    text-align: center;
    background-attachment: scroll;
  background-image: url(../img/me.png);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height: 100vh;
}

 .logo {
         position: absolute;
         bottom: 0;

     }

Answer 1

Harry Robinsob ，这是您的代码的 Fiddle 。
正如你在小提琴中所做的那样，徽标被粘在底部，它没有居中。

稍微改变它现在是中心。

.logo {
    position: absolute;    
    bottom: 0;
    left: 0;
    right: 0;
}

这是一个 link 来开始你自己的小提琴注册拥有自己的。
以下是 Introduction to jsFiddle 的YouTube视频。

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}

header {
    position:relative;
    text-align: center;
    background-attachment: scroll;
    background-image: url('http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height: 100vh;
} 
.logo {
    position: absolute;    
	bottom: 0;
	left: 0;
	right: 0;
}  
    
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<header>
    <a class="page-scroll" href="#about">
        <div class="logo container"> 
            <img src="https://saasu.com/media/assets/Saasu-Logo-RGB-Black-400px.png" alt="logo">
        </div>
    </a>
</header> 
    
    
    
    

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

＆＃13;

使图像位于节滚动网站的底部

1 个答案: