html - 如何垂直对齐此导航栏?

标签 html css navbar vertical-alignment

我有一个导航栏,但我不知道如何垂直对齐某些类。 我使用 Bootstrap 。导航栏是固定位置。导航栏分为 3 行。搜索行没问题,但我无法垂直对齐其他行。

这里是 HTML:

                <div class="col-sm-10" >
                    <p>Reményik Tudástár</p>
                </div>
            </div>
        </div>
    </div>

        <div class="col-sm-4 navbar-search vertical-align">
            <div class="container-fluid">
                <div class="row vertical-align">
                    <div class="col-sm-1"></div>
                        <div class="col-sm-9" style="padding: 0;">
                            <input type="text" name="search" class="navbar-search-input" placeholder="Keresés">
                        </div>

                        <div class="col-sm-1" style="">
                            <button class="navbar-search-button"><i class="fa fa-search"></i></button>
                        </div>
                    <div class="col-sm-1"></div>
                </div>
            </div>
        </div>

    <div class="col-sm-4 navbar-login" style="">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10">
                    <p style="float: right;">Bejelentkezés</p>
                </div>

                <div class="col-sm-2">
                    <span class="fa fa-sign-in fa-2x"></span>
                </div>
            </div>
        </div>
    </div>
</div>

这里是 CSS:

.navigation-bar {
    background-image: url("../img/nav_background.png");
    padding: 15px;
    box-shadow: 0px 2px 5px #999999;
}

.navbar-search-input {
    width: 100%;
    border: 0;
    border-radius: 3px 0 0 3px;
    height: 35px;
    padding: 10px;
}

.navbar-search-button {
    background-color: #203138;
    color: #fff;
    margin-right: 100%;
    border: 0;
    border-radius: 0 3px 3px 0;
    height: 35px;
    padding-left: 12px;
    padding-right: 12px;
}

那么,如何垂直对齐 logo 和 cim 类?

最佳答案

试试这个:-

display: inline-block;
    *display: inline;
    vertical-align: middle;

关于html - 如何垂直对齐此导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40438388/

相关文章:

html - CSS下拉菜单边框和轻微偏移

html - Bootstrap 折叠导航栏 - 我希望菜单左对齐,但它右对齐

javascript - parentNode.remove()在IE中不起作用

html - 如何在:hover上垂直对齐文本

php - 如何使用PHP表单从多个表中检索数据?

css - 为什么FireFox会卡住此登录表单中的输入?

html - 如何在所有浏览器中加粗选择的第一个选项?

javascript - 表单元素不打印吗?

jquery - 如何“锁定”单选按钮,复选框和<select>菜单而不使它们变灰?

css - CSS-带有悬停指针的导航栏