Html 基于引导的垂直选项卡：对齐问题

通过使用

3.2.0

和一个非常好的，我创建了一个具有多个选项的菜单框。 每个菜单项都有一个标签和简短说明，如下图所示：

您可以在上找到代码示例

现在，我想：

在中间对齐菜单项内容（关于垂直对齐）

对齐右下角的“提交”按钮

---

有人可以建议我怎么做吗？

1。在中间对齐菜单项内容（关于垂直对齐）：

.text-center {
    display: table;
    width: 100%;
}
.text-center > div {
    display: table-cell;
    vertical-align: middle;
}

我最近使用了@beaver82minimit提供的这篇优秀教程，它允许创建等高列引导样式：

您可以这样使用它：

<div class="container container-xs-height">
    <div class="row row-xs-height">
        <div class="col-xs-6 col-xs-height"></div>
        <div class="col-xs-3 col-xs-height col-top"></div>
        <div class="col-xs-2 col-xs-height col-middle"></div>
        <div class="col-xs-1 col-xs-height col-bottom"></div>
    </div>
</div>

b） 将其添加到样式表中：

.bottom-right {
    position: absolute;
    right: 0;
    bottom: 0;
}

要防止选项卡内容与按钮重叠，请向选项卡内容div添加

padding bottom

：

div.bhoechie-tab-content{
  background-color: #ffffff;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 54px;
}

下面是一个演示：

列表组项目垂直对齐中间：

.text-center {
    display: table;
    width: 100%;
}
.text-center > div {
    display: table-cell;
    vertical-align: middle;
}

将列表组项下的div添加到标记中：

<a href="#" class="list-group-item idp-group-item text-center">
  <div>
    <strong>Label B</strong><br/>Label B Desc
  </div>
</a>

---

演示：

非常感谢您的回答。我正在尝试使用col middle，但它对菜单项仍然不起作用。您所说的“菜单项”是指选项卡内容（PRISMA、Reply、INFN、Sielte）？