I am trying to align three images (in a bootstrap row) to be vertically central (currently the images are at the top, but I want the choice to either centre them vertically or pull it to the bottom
Here is the image
Here is the code
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vintarn Burmese</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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]-->
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
<style>
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
}
.navbar-default ul {
margin-top: 5px;
font-family: sans-serif;
font-size: 1.1em;
}
.navbar-default li {
font-family: sans-serif;
background-color: rgba(255,253, 208, 0.7);
border-radius: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.navbar-brand {
font-family: 'Marck Script', cursive;
font-size: 2.5em;
}
.testDiv {
height: 100%;
width: 100%;
background-color: rgba(255,192,203,0.8);
}
p {
line-height: 170%;
font-family: sans-serif;
}
.lead {
font-family: sans-serif;
font-size: 1.8em;
}
.marginTop {
margin-top: 20px;
}
.frontImage {
width: 90%;
margin-top: 30px;
margin-left: 5%;
margin-bottom: 30px;
height: 100%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a class="navbar-brand">Vintarn Burmese</a>
</div>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav nav-pills">
<li class="active"><a href="#homeTop">Home</a></li>
<li data-toggle="modal" data-target="#aboutModal"><a href="#about">Kittens</a></li>
<li data-toggle="modal" data-target="#contactModal"><a href="#contact">My Cats</a></li>
<li><a href="#homeTop">History</a></li>
<li data-toggle="modal" data-target="#aboutModal"><a href="#about">About Millie</a></li>
<li data-toggle="modal" data-target="#contactModal"><a href="#contact">Links</a></li>
<li data-toggle="modal" data-target="#contactModal"><a href="#contact">Gallery</a></li>
<li data-toggle="modal" data-target="#contactModal"><a href="#contact">Contact Us</a></li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="testDiv">
<div class="container contentContainer" id="">
<div class="row-fluid">
<div class="col-md-4 col-sm-4">
<img src="images/landing/bvna-member-signature.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/Vania-8-mths-2.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/gccflog.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-12 marginTop" id="">
<h1 class="lead">Welcome to the story of the Vintarn Burmese...</h1>
<p>My name is Christine Stalker and the first Burmese to come into my life was a brown girl called 'Floo'. She belonged to a vet I worked for in London in 1972 whilst training to be a veterinary nurse and she was simply the naughtiest cat I'd ever met - but she was utterly adorable! I promised myself that one day, I would have a Burmese of my own... Three years later, in 1975, whilst working in Bedford as a newly qualified veterinary nurse, I bought my own very first Burmese (a brown tortie) called Tantabin Amazing Grace - better known as "Eccles" from a local breeder, Mrs Bettina Stapleton. Bettina mentored me into showing and breeding and thus began what has become, over the past 40 years, an enduring "love affair" with Burmese cats! I am a qualified Registered Veterinary Nurse (RVN) and I worked full time in Veterinary Practice for 30 years, until 2002. This was followed by four years in publishing at OUR CATS in Manchester. From 2006 - 2011 I owned & published a trade magazine. I now work part-time for a local charity - this means I get to spend lots of time at home with my cats. I share my home in Cheshire with three adorable Burmese cats. Two are now retired from breeding and have been neutered, they are: 'Whisper' (Imperial Grand Champion & Imperial Grand Premier Vintarn Whisper a Wish) and 'Bo' (Champion Vintarn Rosies Rainbow) - who is Whisper's daughter. Last but not least, is my latest addition, a lilac girl called 'Lyra' (Vintarn Lilac Lyra) I am hoping that Lyra will have her first litter in 2015. My prefix, Vintarn, was registered with the G.C.C.F. in 1977. I enjoy showing my beautiful cats at Championship Shows in the UK, and was delighted when my lilac tortie, Vania, became my first Grand Champion on 8th March 2008! Vania is now retired and lives a life of luxury in Southport! Whisper, Vania's daughter made me very proud in November 2009, by becoming Best of Variety Burmese at the Cheshire Area Cat Show. She was then became a Grand Champion on 6th February 2010, at the Shropshire Cat Show, following in her mother's footsteps! She has subsequently gone on to gain the dual title of Imperial Grand Champion & Imperial Grand Premier. Whilst I enjoy showing, my cats are, first and foremost, my beloved pets.
</p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Marck+Script::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</body>
</html>
