Question

我无法使用Bootstrap 和粘贴页脚来尝试水平和垂直居中图像。它需要流畅，响应迅速，并且可以在台式机和手机上工作。如果窗口/屏幕尺寸太小（显然），我不希望页脚覆盖图像。

任何帮助或见解都将非常感谢！

这是我所得到的......

404.php

<html lang="en">
 <head>
  <title>Error 404</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>Error 404</title>

  <!-- Bootstrap -->
  <link href="/assets/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles -->
  <link href="/assets/css/sticky-footer.css" rel="stylesheet">
  <link href="/assets/css/custom.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>

<body>

<div class="container-fluid">
 <div class="panel-default">
  <div class="panel-body">
   <div class="text-center top"><h2>Error 404</h2>
   </div>

   <div class="form-group text-center">
     <h4>Nothing to see here, nothing to see</h4>
     <img src="/assets/images/404.jpg" class="img-responsive center-block">
   </div>

  </div>
 </div>
</div>

<footer class="footer">
 <div class="container">
  <p class="text-muted text-center">
   <small>&copy; 2015</small>
  </p>
 </div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</body>
</html>

粘性footer.css

/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
}

Answer 1

粘性底页

Bootstrap有一个我发现对页脚有用的导航栏。尝试使用navbar navbar-default navbar-fixed-bottom代替您的自定义页脚类。

垂直居中

This question有很多关于垂直居中的重要信息。这就是我使用的：

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

水平居中

我发现水平居中的最简单的解决方案就是使用center-block。哈斯还没让我失望。

Answer 2

我建议你首先考虑stackoverflow question。

这也可能让你开始（在你的sticky-footer.css中更改它）：

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  display: table;  /*<<<< this line was added*/
}
.container {  
  height: 100%;
  display: table-cell;   
  vertical-align: middle;    
}
.cent {
  margin: 0 25% auto 25%; 
}

在网页中添加类别分段，即：

  <p class="cent text-muted text-center">
   <small>&copy; 2015</small>
  </p>

Bootstrap，垂直和水平居中图像与粘性页脚

2 个答案: