All geek questions in one place

Vertically centered loading sticky footer

Trying to change the boot example. The sticky footer example http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html to have vertically centered content, but still can't do it.

The full code is given below. I am trying to vertically align the part between the comments "Start page content" and "Page content".

Would thank for any help.

<html lang="en"> <head> <meta charset="utf-8"> <title>Sticky footer &middot; Twitter Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- CSS --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by it height */ margin: 0 auto -60px; } /* Set the fixed height of the footer here */ #push, #footer { height: 60px; } #footer { background-color: #f5f5f5; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ #wrap > .container { padding-top: 60px; } .container .credit { margin: 20px 0; } code { font-size: 80%; } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="../assets/ico/favicon.png"> </head> <body> <!-- Part 1: Wrap all page content here --> <div id="wrap"> <!-- Fixed navbar --> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Header</h1> </div> <p class="lead">Content</p> </div> <!-- End page content --> <div id="push"></div> </div> <div id="footer"> <div class="container"> <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div> </body>
+4
source share
2 answers

Bootstrap 3 has a sticky footer with vertical and horizontal content. If you do not need a horizontal center, delete the text center of the class.

 <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <div class="col-sm-12 text-center navbar-text"> your content.... </div> </div> </nav>
+7
source

When you set a fixed height, use the top of the top layer to get the content vertically.

Or you can try using in your content:

 vertical-align: middle;
0
source

Source: https://habr.com/ru/post/1494486/

More articles:


All Articles