Html 将元素放在一行中，无论大小都保持垂直居中

好的，我正在设计一个引导式手风琴标题面板，其中包含多个元素：

一个大按钮

一些（简短的）文本/标题可能有多行

左边的一个小按钮组

从理论上讲，这很好，至少如果标题对于容器来说不太长的话。如果它开始溢出到第二行或第三行，整个概念就会分崩离析。看看我的小提琴

我想要的是所有元素都是1。挨着一个，2。垂直居中

因此，让我试着画出更大的标题应该是什么样子：

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

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

---

如何实现这一点？

使用引导网格系统可以非常简单地实现这一点，请阅读以下信息：

应该是这样的：

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

左内容
中间内容
正确内容

您应该阅读引导文档，这里有更多的示例和更多的“如何”，这样您就可以找到您真正需要的东西

只是一些基础知识：

• 引导网格有12个“空格”用于列。在上面的例子中，我创建了三列布局，中间的一列比另一列大（你可以看到2-8-2-你可以用3-6-3或类似的方式玩-总和必须总是12）

• col md-…

  中的“md”表示此列仅在中型设备桌面上可见(≥992px），您可以使用“xs”或其他较小的设备-这取决于您需要什么

---

为什么不将按钮和按钮组放入h4元件中？同时，从你的div元素中向左拉。我不知道这是否是你想要的，但我在css类中添加了一个中心对齐，并删除了面板标题元素中的左拉。我还将按钮放入header元素中

<h4 class="panel-title heading">
    <div class="pull-left">
  <button type="button" class="btn btn-default some-button">
    button!
  </button>
</div>
  <a>
    Some string (short)
  </a>
    <div class="btn-group pull-right">
  <button type="button" class="btn btn-default">a</button>
  <button type="button" class="btn btn-default">b</button>
  <button type="button" class="btn btn-default">c</button>
</div>
</h4>

按钮
一些字符串（短）
A.
B
C

这里有一个垂直居中的东西，可能是你想要的

这里有一个

以及守则：

Css：

.cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

<div id="panel-1" class="panel panel-default">
    <div class="panel-heading clearfix">
        <div class="row">
            <div class="col-xs-2 cell">
                <button type="button" class="btn btn-default some-button">button!</button>
            </div>
            <div class="col-xs-8 cell">
                <h4 class="panel-title pull-left heading">
                  <a>Short</a>
                </h4>
            </div>
            <div class="col-xs-2 cell" >
                <div class="btn-group">
                    <button type="button" class="btn btn-default">a</button>
                    <button type="button" class="btn btn-default">b</button>
                    <button type="button" class="btn btn-default">c</button>
                </div>
            </div>
        </div>
    </div>
    <div id="panel-2" class="panel panel-default">
        <div class="panel-heading clearfix">
            <div class="row">
                <div class="col-xs-2 cell">
                    <button type="button" class="btn btn-default some-button">button!</button>
                </div>
                <div class="col-xs-8 cell">
                    <h4 class="panel-title pull-left heading">
                        <a>Some string that's really longish and stuff hehe right? (looooong long long)</a>
                    </h4>
                </div>
                <div class="col-xs-2 cell">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">a</button>
                        <button type="button" class="btn btn-default">b</button>
                        <button type="button" class="btn btn-default">c</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

HTML：

.cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

<div id="panel-1" class="panel panel-default">
    <div class="panel-heading clearfix">
        <div class="row">
            <div class="col-xs-2 cell">
                <button type="button" class="btn btn-default some-button">button!</button>
            </div>
            <div class="col-xs-8 cell">
                <h4 class="panel-title pull-left heading">
                  <a>Short</a>
                </h4>
            </div>
            <div class="col-xs-2 cell" >
                <div class="btn-group">
                    <button type="button" class="btn btn-default">a</button>
                    <button type="button" class="btn btn-default">b</button>
                    <button type="button" class="btn btn-default">c</button>
                </div>
            </div>
        </div>
    </div>
    <div id="panel-2" class="panel panel-default">
        <div class="panel-heading clearfix">
            <div class="row">
                <div class="col-xs-2 cell">
                    <button type="button" class="btn btn-default some-button">button!</button>
                </div>
                <div class="col-xs-8 cell">
                    <h4 class="panel-title pull-left heading">
                        <a>Some string that's really longish and stuff hehe right? (looooong long long)</a>
                    </h4>
                </div>
                <div class="col-xs-2 cell">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">a</button>
                        <button type="button" class="btn btn-default">b</button>
                        <button type="button" class="btn btn-default">c</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

按钮
短
A.
B
C
按钮
一些很长的绳子，是吗？（龙龙）
A.
B
C

你试过什么吗？嗯，是的，我试过用谷歌搜索，但我发现的问题都没有涉及文本和可能的换行符。我发现最接近的是，但在我的情况下似乎不起作用。我还尝试使用

垂直对齐

和我发现的一系列其他提示，但都没有用。我想主要的问题可能是我不能用正确的术语来描述这个问题。我肯定有很多解决方案。嗯，我试着使用网格，但中途停了下来，因为我不确定它是否真的适用于这个用例。现在我知道这是正确的方式，我会再看一看，谢谢！抱歉，我标记了另一个，因为它还包括垂直对齐解决方案。非常感谢你！谢谢，这真的很接近我想要的！从这里开始。嗯，

单元格

类中的

float:none

会把一切搞糟，也就是说元素并不总是按网格单元格对齐。。。但当我移除它时，垂直对齐停止工作。有什么想法吗？好的，看起来是

。cell

需要

显示：内联块

而不是

表格单元格

.a而且还需要一个技巧，这样我就可以让列加起来12个：（div之间有注释的黑暗魔法）