html - 与Bootstrap 3垂直对齐(vertical-align with Bootstrap 3)

Question

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div , for example — JSFiddle link : (我正在使用Twitter Bootstrap 3，并且在要垂直对齐两个div时遇到问题，例如-JSFiddle链接 ：)

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> 

The grid system in Bootstrap uses float: left , not display:inline-block , so the property vertical-align doesn't work. (Bootstrap中的网格系统使用float: left ，而不使用display:inline-block ，因此属性vertical-align不起作用。) I tried using margin-top to fix it, but I think this is not a good solution for the responsive design. (我尝试使用margin-top进行修复，但是对于响应式设计，这不是一个好的解决方案。)

  ask by corinem translate from so

Answer 1

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer ), since it's now supported everywhere. (这个答案是一个hack，但是我强烈建议您使用flexbox（如@Haschem answer中所述 ），因为现在它在任何地方都受支持。)

Demos link: (演示链接：)
- Bootstrap 3 (- 引导程序3)
- Bootstrap 4 alpha 6 (-Bootstrap 4 Alpha 6)

You still can use a custom class when you need it: (您仍然可以在需要时使用自定义类：)

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

 <div class="row"> <div class="col-xs-5 col-md-3 col-lg-1 vcenter"> <div style="height:10em;border:1px solid #000">Big</div> </div><!-- --><div class="col-xs-5 col-md-7 col-lg-9 vcenter"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> 

Bootply (自举)

Using inline-block adds extra space between blocks if you let a real space in your code (like ...</div> </div>... ). (如果在代码中...</div> </div>...实际空间（例如...</div> </div>... ），则使用inline-block会在块之间添加额外的空间。) This extra space breaks our grid if column sizes add up to 12: (如果列大小总计为12，则此额外空间将破坏网格：)

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Here, we've got extra spaces between <div class="[...] col-lg-2"> and <div class="[...] col-lg-10"> (a carriage return and 2 tabs/8 spaces). (在这里，我们在<div class="[...] col-lg-2">和<div class="[...] col-lg-10">之间有多余的空格（回车符和2制表符/ 8个空格）。) And so... (所以...)

Let's kick this extra space!! (让我们踢这个额外的空间！)

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Notice the seemingly useless comments <!-- ... --> ? (注意看似无用的注释<!-- ... --> -...- <!-- ... -->吗？) They are important -- without them, the whitespace between the <div> elements will take up space in the layout, breaking the grid system. (它们很重要 -没有它们， <div>元素之间的空格将占据布局中的空间，从而破坏网格系统。)

Note: the Bootply has been updated (注意：Bootply已更新)