Bootstrap div 列未在行中垂直对齐答案

【问题标题】：Bootstrap div columns not aligning vertically in rowBootstrap div 列未在行中垂直对齐
【发布时间】：2014-07-16 01:07:40
【问题描述】：

这是我的第一篇文章，因为我被困在制作我的第一个网站的第一部分。

我正在尝试制作一个包含五个部分的导航栏：
（3 项的垂直列表）（标签）（徽标）（标签）（3 项的垂直列表）
例如，
（苹果、橙子、梨）（水果）（徽标）（蔬菜）（西兰花、芹菜、生菜）

在我的代码中，两个垂直列表没有相互对齐，我无法让它们中的任何一个在栏中垂直居中。

这是我的代码：

HTML

<body>
<div class='nav'>
    <div class='container-fluid'>
        <div class='row'>
            <div class='col-md-3'>
                <ul class='port-list' class='navbar-left'>
                    <li>Art</li>
                    <li>Design</li>
                    <li>Writing</li>
                </ul>
            </div>

            <div class='col-md-3'>
                <p class='port'>Portfolio</p>
            </div>

            <img>

            <div class='col-md-3'>
                <p class='about'>About</p>
            </div>

            <div class='col-md-3'>
                <ul class='about-list' class='navbar-right'>
                    <li>Biography</li>
                    <li>R&eacute;sum&eacute;</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

CSS

* {
    list-style: none;
    list-style-type: none;
}

body {
    height: 100%; /* Prevents rubber-band scrolling */
    overflow: hidden; /* Prevents rubber-band scrolling */
}

.nav {
    color: #fff;
    font-family: 'Donegal One', serif;
    background-color: #004d40;
    padding-top: 12px;
    padding-bottom: 8px;
    display: block;
}

.port-list {
    text-align: right;
}

.port {
    text-align: left;
}

.about {
    text-align: right;
}

.about-list {
    text-align: left;
}

这里的新手将不胜感激。谢谢。

【问题讨论】：

您在寻找this吗？
@Tushar，就是这样。谢谢！
我已经添加了答案，你该怎么做。如果对你有帮助，你可以接受。

标签： html css twitter-bootstrap

【解决方案1】：

Here 是更新后的代码

HTML

<div class='row newRow'>

将newRow 添加到row CSS

.newRow {
  width: 100%;
  display: table;
}
.newRow .col-md-3 {
  display: table-cell;
  vertical-align: middle;
  float: none
}

【讨论】：

谢谢@Tushar！我会支持你，但它不会让我，因为我的声誉至少不是 15。

【解决方案2】：

您可以为两个 div 定义line-height，如下所示：

<div class='col-md-3' style="line-height:58px;">
      <p class='port'>Portfolio</p>
</div>
....
<div class='col-md-3' style="line-height:58px;">
     <p class='about'>About</p>
</div>

【讨论】：