Html 垂直对齐流体DIV中的内容

这是我的密码：

编辑很抱歉造成混淆，我的目标是在第二个

DIV

内垂直对齐

按钮

。差不多

我不想将固定的

高度定义为第二个
DIV
，因为我希望它支持不同的屏幕大小（桌面和移动）

我尝试了
display:table方法”无效，因为它需要固定高度。
我想您希望按钮垂直对齐

您可以使用实际表格，检查此更新的小提琴：

守则：

<div class="row">
    <table style='width:100%'>
        <tr>
            <td>
                <div class="col-xs-6">
                    <h2>Header X</h2>
                    <h4>Header Y</h4>
                    <p>
                        Text X
                    </p>
                    <p>
                        <b>Bold X</b>
                        <ul>
                            <li>Line X</li>
                            <li>Line Y</li>
                            <li>Line Z</li>
                        </ul>
                    </p>
                </div>
            </td>
            <td>
                <div class="col-xs-6" style="text-align: center; vertical-align: middle;">
                    <button type="button" class="btn btn-primary btn-lg">Button X</button>
                </div>
            </td>
        </tr>
    </table>
</div>


标题X
标题Y

文本X


粗体X

第X行
线Y
Z线


按钮X
多亏了，现在即使在未知高度也可以进行垂直对齐


<div class="container-fluid">
    <div class="row vertical-align"> <!-- 
             Here --^                 -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

可以在的当前行中对齐
柔性容器，类似于但垂直于
方向。设置所有弹性体的默认对齐方式
容器的项目，包括匿名flex项目

居中值：

弹性项的边距框位于线内横轴的中心。（如果柔性线的交叉尺寸小于柔性项目的交叉尺寸，则其将在两个方向上均匀溢出。）

因此，您可以使用以下声明向
.row
1元素添加一个附加类：


<div class="container-fluid">
    <div class="row vertical-align"> <!-- 
             Here --^                 -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

如需进一步阅读（包括浏览器支持），请参阅以下参考资料：







一,。你真的不想改变Twitter引导的所有行，是吗？
你想让第二个div位于第一个div之下吗？具体来说，你想垂直对齐什么？不知道你真正想做什么。你能解释一下你的期望吗？你的问题是什么？很抱歉，我已经用更多的信息编辑了这个问题。我确信他想要一个表的布局。这有两个问题，你需要将
class=“col-md-6”
添加到表
中，而不是
DIV
，而且它不太适合流体布局，因为当空间太小的时候，它会被挤压，永远不会去新的线条。事实上，它没有我最初想象的那么好。当空间变小时，内容（在本例中为按钮）将从两个div（父div和包含按钮的div）中获取。如果您将
col-xs-6
更改为
col-sm-6
，您将看到流体布局工作得不太好（与表格相同），它应该创建一个新行，而不是将内容压缩到一定的大小。@rekt
…两个div中的内容都被删除了
我无法复制它，如果您能在JSFIDLE上演示这个问题，那就太好了。但是关于第二个问题，您可以使用
@media
查询将
.vertical align
选择器应用于特定的屏幕大小，如下所示：onhttp://jsfiddle.net/hashem/g6puyohg/6/