Html 引导映像垂直中间对齐

Html 引导映像垂直中间对齐,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,我正在尝试将三个图像(在一个引导行中)垂直居中对齐(当前图像位于顶部,但我希望选择垂直居中或将其拉至底部) 这是图片 这是密码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

我正在尝试将三个图像(在一个引导行中)垂直居中对齐(当前图像位于顶部,但我希望选择垂直居中或将其拉至底部)

这是图片

这是密码

<!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>

文塔缅甸语
.navbar默认值{
边缘顶部:30px;
背景色:透明;
边界:隐藏;
}
.navbar默认值ul{
边缘顶部:5px;
字体系列:无衬线;
字体大小:1.1米;
}
.navbar默认值li{
字体系列:无衬线;
背景色:rgba(2552532008,0.7);
边界半径:5px;
右边距:5px;
边缘底部:5px;
}
.navbar品牌{
字体系列:“马尔克脚本”,草书;
字号:2.5em;
}
.testDiv{
身高:100%;
宽度:100%;
背景色:rgba(255192203,0.8);
}
p{
线高:170%;
字体系列:无衬线;
}
.铅{
字体系列:无衬线;
字号:1.8em;
}
马金托普先生{
边缘顶部:20px;
}
.frontImage{
宽度:90%;
边缘顶部:30px;
左缘:5%;
边缘底部:30px;
身高:100%;
垂直对齐:中间对齐;
显示:内联块;
}

  • 欢迎来到文塔缅甸人的故事。。。 我的名字叫克里斯汀·斯泰尔,第一个走进我生活的缅甸人是一个叫“弗洛”的棕色女孩。1972年,我在伦敦训练成为一名兽医时,她属于一名兽医。她是我见过的最淘气的猫——但她非常可爱!我向自己保证,有一天,我会有一只属于我自己的缅甸猫。三年后的1975年,我在贝德福德作为一名新的合格兽医护士工作时,买了我自己的第一个缅甸人(一种棕色的玉米饼),名叫坦塔宾·阿奇恩斯(Tantabin Azing Grace)——俗称“Eccles”来自当地的一位饲养员贝蒂娜·斯泰普顿夫人。贝蒂娜指导我进行展示和繁殖,从而开始了在过去40年中与缅甸猫之间持久的“恋情”!我是一名合格的注册兽医护士(RVN)我在兽医行业全职工作了30年,直到2002年。之后,我在曼彻斯特的《猫》杂志社出版了四年。从2006年到2011年,我拥有并出版了一本贸易杂志。我现在在当地一家慈善机构兼职——这意味着我可以花很多时间在家里和我的猫在一起。我在柴郡的家里有三个阿多拉缅甸猫科动物。现在有两只已经从繁育中退休并被阉割,它们是:“耳语”(帝国大冠军和帝国大总理文塔兰耳语许愿)和“波”(冠军文塔兰·罗西丝·彩虹)——她是耳语的女儿。最后但并非最不重要的是,我最新加入的一个丁香女孩,名叫“天琴座”(文塔兰·丁香天琴座)我希望莱拉能在2015年生下她的第一胎。我的前缀Vintarn于1977年在G.C.C.F.注册。我喜欢在英国的锦标赛上展示我美丽的猫咪,当我的紫丁香玉米饼Vania于2008年3月8日成为我的第一个大冠军时,我很高兴!Vania现在退休了,在Southport过着奢侈的生活!Wh2009年11月,瓦尼亚的女儿伊斯珀在柴郡地区的猫展上成为缅甸人中最优秀的一员,这让我感到非常自豪。随后,她继母亲之后,于2010年2月6日在什罗普郡猫展上成为了大冠军!她随后获得了帝国大冠军和帝国大P的双重头衔雷米尔。虽然我喜欢表演,但我的猫首先是我心爱的宠物。

    WebFontConfig={ 谷歌:{families:['Marck+Script::拉丁文']} }; (功能(){ 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); })();
    基于您的DOM,不一定是您要居中的图像,而是环绕图像的列。这个问题似乎在这里得到了回答:Hello@robabby。我尝试将vCenter的名称指定给我的div,并将其命名为CSS。vCenter{display:inline block;vertical align:middle;float:left;}但是这没有效果,可能是因为这是嵌套在另一列中的引导列吗?您将该类添加到了哪个div?您有可用的JSFIDLE供我查看吗?不过如果您转到,我将尝试使最后两个图像在列中垂直居中