Question

我正在尝试将导航栏与我的网站徽标和标题垂直对齐，但每当我尝试在，和标签上使用display: inline-block;和vertical-align: middle;时（这些都在同一个div中）在我的网站顶部），导航栏从水平到垂直，这不是我想要的。我也在使用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来实现我在导航栏中垂直对齐所有元素的目标，那将是很好的

Answer 1

如果我没有错，引导网格有＆＃34;浮动＆＃34;造型在里面。所以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
}

如何使用导航栏垂直对齐网站徽标和标题

1 个答案: