如何将网站徽标和标题与Navbar垂直对齐

Question

我正在尝试将纳维巴尔与我的网站徽标和标题垂直对齐，但是每当我尝试使用 display: inline-block;和 vertical-align: middle;时，在我的网站的顶部(，Navbar从水平到垂直行业，这不是我想要的。我还在使用Bootstrap 4。

这是我的html：

<div id="home">
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img src="images/test-logo.png">
                    <h1>Rigid Signs</h1>
                </div>
                <div class="col-md-8">
                    <ul class="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的CSS：

    #home {
    background: url('../images/workshop-testphoto.jpg') no-repeat center / cover;
    height: 844px;
}
.page-header {
    background: rgba(0,0,0,.6);
    postion: fixed;/*not working*/
    padding: 11px 0;
}
.page-header img, .page-header h1 {
    display: inline-block;
    vertical-align: middle;
}
.page-header img {
    width: 88px;
}
.page-header h1 {
    font-size: 32px;
    color: white;
    margin-left: 11px;
}
.page-header .nav {
    float: right;
}
.page-header .nav li a {
    display: inline-block;
    font-size: 22px;
    text-decoration: none;
    color: #fff;
}

我对Bootstrap 4不是很好，但是如果有人知道我如何使用Bootstrap 4来实现我的Navbar中所有元素的目标，那将是很棒的Aswell

Answer 1

如果我没有错，则引导网格在其中具有" float"样式。因此，Col-MD-4和Col-MD-8将剩下漂浮。因此，使用内联块代替浮子，并为两个div提供垂直对齐的中间。使用您显示的当前HTML，它将是

.row {
    font-size: 0; /*to remove blank space between two inline-block element*/
}
.col-md-4, .col-md-8 {
    float: none;
    display: inline-block;
    vertical-align: middle
}