html - 将元素排成一行，无论大小如何，都保持垂直居中

Question

好的，我正在设计一个包含多个元素的 Bootstrap Accordion 标题面板:

1. 一个大按钮
2. 一些(简短的)文本/标题可以是多行长
3. 左侧的小按钮组

从理论上讲，它工作得很好，至少如果标题对于容器来说不是太长的话。如果它开始蔓延到第二或第三行，整个概念就会分崩离析。看我的 fiddle here .

我想要的是所有元素总是 1.彼此相邻，2.垂直居中。

所以让我试着画出更大标题的样子:

-----------------------------------------------------
|                                                   |
| -------    Text that spillls over    ----------   |
| | BTN |    into the next line and    |  |  |  |   |
| -------    beyond!                   ----------   |
|                                                   |
-----------------------------------------------------

所以基本上，这三个元素中的每一个都有明确定义的空间，并且在其中垂直居中。

我如何实现这一目标？

Answer 1

您可以使用 Bootstrap 网格系统非常简单地完成此操作，请在此处阅读一些信息:http://getbootstrap.com/css/

应该是这样的:

<div class="row">
    <div class="col-md-2">left content</div>
    <div class="col-md-8">middle content</div>
    <div class="col-md-2">right content</div>
</div>

您应该阅读 bootstrap 文档，那里有更多示例和更多“操作方法”，因此您可以找到您真正需要的内容

只是一些基础知识:

• bootstrap 网格有 12 个“空格”用于列。在上面的示例中，我创建了 3 列布局，中间列比另一列大(你可以看到 2-8-2 - 你可以玩 3-6-3 或类似的 - 总和必须始终为 12)
• col-md-... 中的“md”表示此列仅在中型设备桌面(≥992px)上可见，您可以使用“xs”或其他较小设备- 这取决于你需要什么