i have a html page with fixed bootstrap navbar.i have a container of width 1000px i am trying to put this navbar inside my container but i couldn't achieve.still it occupies the entire page width.I want the fixed navbar to be aligned within my container.i have attached the snapshot.enter image description here
enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height:100%;
background:#f5f5f5;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
Just removed the navbar-fixed-top from navbar.
Here is updated code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,
body {
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin: 0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height: 100%;
background: #f5f5f5;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
<nav width="1000px" class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
Js Fiddle
See this below example it will help
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
.conatiner1{position:fixed; width:100%}
#media (max-width:769px){
.divContent{margin-top:230px !important;}
}
</style>
</head>
<body style="height:100%;">
<div class="container">
<nav class="conatiner1 navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</div><div>
<div class="container divContent" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
Just Check following code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height:100%;
background:#f5f5f5;
}
nav {
width: 100%;
max-width: 1170px;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
Related
First Question
Bootstrap collapse not working when i check responsive...but when i resize my browser it works but still there is a prblem i dont want it to collapsed next to navbar brand...it must be under it
collapseImg
<!DOCTYPE html>
<html>
<head>
<title>Company Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Font Awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="Flex Slider/flexslider.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="mainNav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header pull-left">
Lorem
</div>
<button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target="#navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
whiteSpaceImg
Second questioin is about white space on right side
<!-- SLIDER -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li>
<li id="slide2"><img src="Images/Slider Images/image1.jpg"></li>
<li id="slide3"><img src="Images/Slider Images/image2.jpg"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
</ul>
</div>
</div>
</div>
</div>
/----- NAVIGATION ----/
html{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#mainNav{
background:transparent;
border: none;
overflow:hidden !important;
}
.navbar-default a{
color: white !important;
transition: color 0.5s;
font-weight: bolder;
}
.navbar-default a:hover{
color: black !important;
}
#slider{
border: none;
margin: 0px !important;
}
/* ---- HEADER -----*/
#slider img{
height: 100vh;
width: 100%;'
}
.col-sm-12{
padding-left:0 !important;
padding-right:0 !important;
}
I am having problems with the gap between header and navbar. I have no idea how to get rid of that gap. I would be grateful if anyone here would know how to repair that issue.
<!DOCTYPE html>
<html lang=en>
<html>
<head>
<script src=java.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="icon" type="image/jpg" href="link"> <!--browser icon-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>Browser page name</title><!--insert page name-->
</head>
<body>
<div class="body">
<div class="jumbotron header">
<div class="container text-center">
<h1>Business Name</h1> <!--big header name-->
<p>Motto or slogan</p> <!--smaller text below header name-->
</div> <!--end of container text center div-->
</div> <!--end of jumbotron header div-->
<!--start of navigation-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<!--end of navigation-->
</div><!--end of body div-->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
css
.header /* Header settings */
{
background-color:#000 !important; /*background color black*/
color:#fff !important; /*font color white*/
height:200px; /*height of the whole element*/
font-family:Impact, Charcoal, sans-serif; /*font of the text*/
}
body /*background of the page*/
{
background:#ffb3b3 !important; /*background color of the whole page*/
}
Please help me with this as this looks ugly.
The Jumbotron class has 30px bottom margin by default. Change the jumbotron class to have margin-bottom:0; Here is a fiddle
Because you have .jumbotron class which has margin-bottom:30px by default in Bootstrap.
So you need to reset it, using margin-bottom:0
Note:
avoid using !important , it is bad practice.
you have 2 bootstrap-min.js files, when you just need one.
.header {
/* Header settings */
background-color: #000
/*background color black*/
color: #fff
/*font color white*/
height: 200px;
/*height of the whole element*/
font-family: Impact, Charcoal, sans-serif;
/*font of the text*/
}
body {
/*background of the page*/
background: #ffb3b3
/*background color of the whole page*/
}
.body .jumbotron {
margin-bottom: 0
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="body">
<div class="jumbotron header">
<div class="container text-center">
<h1>Business Name</h1>
<!--big header name-->
<p>Motto or slogan</p>
<!--smaller text below header name-->
</div>
<!--end of container text center div-->
</div>
<!--end of jumbotron header div-->
<!--start of navigation-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1
</li>
<li>Page 1-2
</li>
<li>Page 1-3
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</nav>
<!--end of navigation-->
</div>
<!--end of body div-->
I am working on sticky footer. I have created html and css but css seems to be not working. can anyone let me know where I am going wrong?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="C:\Users\Man\Desktop\testi.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TESTING</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Performance</li>
<li>Book Library</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
<p class="text-muted credit">Testing project Martin Bean </p>
</div>
</nav>
</div>
</body>
</html>
testi.css
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 its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 260px;
background-color: #fdfdfd;
}
Are you using firefox, You need to change file path like this
<link rel="stylesheet" href="file:///C:/Users/Man/Desktop/testi.css">
I use bootstrap in my website, i create a new dropdown button and I added in the header, my problem is when I click on dropdown that menu is appear under the others elements, I will add here an image to see what is the problem , I think the problem is z-index:
here is my html code:
<div class="page">
<div class="header-container">
<div class="container">
<div class="row">
<div class="header">
<div class="col-md-4 col-md-offset-0">
<div class="dropdown">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is with the wrapper. It has a property overflow: hidden which hides anything that is outside its area. Remove this and it will work. Not a z-index problem.
.wrapper {
overflow: hidden; // Remove
width: 100%;
}
Try it This Code in your header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dropdowns within Navs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Trying to modify bootstrap's Sticky footer example http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html to have vertically centred content, but still fail to do that.
The full code is below. I'm trying to vertically align the part between "Begin page content" and "End page content" comments.
Would appreciate any help.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer ยท 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's 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">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</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 Martin Bean and Ryan Fait.</p>
</div>
</div>
</body>
In Bootstrap 3 - sticky footer with vertical and horizontal content.If you don't need horizontal center remove the class text-center.
<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>
When you set a fixed height then use padding-top to get content centered vertically.
Or you can try to use on your content:
vertical-align: middle;