Question

这是我的第一篇文章，因为我在制作我的第一个网站的第一部分时已经陷入困境。

我试图制作一个包含五个部分的导航栏：
（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;
}

这位新手会感激任何帮助。感谢。

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

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

Bootstrap div列未在行中垂直对齐

2 个答案: