引导垂直对齐列(Bootstrap Vertical align in Column)

所以我有一个行和两列的桌面视图中的超大屏幕。 该行高度取决于文本。 我想旁边垂直居中的图像文本。

我使用的是网格布局有两列，这和下面的代码垂直居中图像：

 #jumbotron-introduction { background-color: white; } #p-introduction { font-size: 16px; } #image-introduction { width: 100%; } .vcenter { display: flex; align-items: center; justify-content: center; } 

 <div class="container"> <div class="jumbotron" id="jumbotron-introduction"> <div class="row"> <div class="col-xs-12 col-md-6 col-sm-6"> <h3>...</h3> <p id="p-introduction">...</p> </div> <div class="col-xs-12 col-md-6 col-sm-6 vcenter"> <img src="Images/..." id="image-introduction"> </div> </div> </div> </div> 

但是没有什么变化，图像仍集中在塔的顶部。 我也试过下面的代码：

 .vcenter { display: inline-block; vertical-align: middle; } 

但它是同样的结果，没有任何反应。

这就是它的外观像此刻

但我希望它看起来是这样的：

Answer 1:

当以往任何时候都需要我在HTML中居中的东西-对CSS的技巧指南总是帮助我这样做。 我建议你阅读并保存，以便下次你需要的东西居中的时间！

对于你的问题，你可以使用Flexbox的达到预期的效果-将.vcenter显示器弯曲，这样你就可以使用align-items属性。

 .jumbotron__container { display: flex; background: #fff; } .jumbotron__text { flex: 1 0 50%; padding: 10px; border-right: 1px solid black; } .jumbotron__image { display: flex; flex: 1 0 50%; align-items: center; justify-content: center; } 

 <div class="container"> <div class="jumbotron" id="jumbotron-introduction"> <div class="jumbotron__container"> <div class="jumbotron__text"> <h3>Loren And Ipsum</h3> <p id="p-introduction">Dolum And Smith<p> </div> <div class="jumbotron__image"> <img src="Images/..." id="image-introduction"> </div> </div> </div> </div> 

Answer 2:

我认为这是仍处于测试阶段，当有人问，但引导4拥有全新的基于Flexbox的，实用类 ，使这个容易。 尤其是， align-self-center会做什么你要找的：

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="jumbotron bg-light"> <div class="row"> <div class="col-xs-12 col-md-6"> <h3>Text</h3> <p class="h4">Text</p> <p>Text</p> <p>More text</p> <p>Even more text</p> <p>Just a little more text</p> </div> <div class="col-xs-12 col-md-6 align-self-center"> <img src="https://www.gstatic.com/images/branding/product/2x/avatar_square_grey_48dp.png"> </div> </div> </div> </div> 

（摘录似乎并没有工作，除非它是全屏BTW）。

Answer 3:

 #image-introduction{ vertical-align: middle; position: absolute; top: 45%; left: 45%; } .col-md-6.col-sm-6.col-xs-6 { display: table-cell; height: auto; border: 1px solid black; float: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="parent"> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="..." id="image-introduction"> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </div></div> 

Answer 4:

使用inline-block帮手。

 .vcenter { display: inline-block; vertical-align: middle; float: none; height: 200px; white-space: nowrap; } #image-introduction { display: inline-block; vertical-align: middle; } .inline-block-helper { height: 100%; vertical-align: middle; display: inline-block; } 

 <div class="col-xs-12 col-md-6 col-sm-6 vcenter"> <span class="inline-block-helper"></span> <img src="https://placehold.it/100x100" id="image-introduction"> </div> 

文章来源: Bootstrap Vertical align in Column