html - 如何在内联表中应用垂直对齐

Question

如问题 :) 我想将我的文本在链接内垂直居中。我试图在没有 srcipt 的情况下处理这个问题，但我的想法不起作用。另外，我不想失去“a”元素的 100% 高度。预先感谢您解决我的问题的任何方法。我正在使用 twitter bootstrap 3

        .navbar-wrapper {

            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            z-index: 20;
        }

        .navbar .navbar-nav {

            display: block;
            float: none;
        }

        .navbar .navbar-nav > li {

            display: table-cell;
            float: none;    
        }

        .navbar .navbar-nav > li > a {

            display: inline-table;
            height: 100%;
        }  


        /*.navbar .navbar-nav > li > a > span {

            vertical-align: middle;

        } */ 

和 html:

    <div class="navbar-wrapper">
        <div class="container">
            <div class="navbar navbar-inverse navbar-static-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Project name</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav text-center">
                            <li><a href="#"><span>level 1 line 1<br />line 2</span></a></li>
                            <li class="active"><a href="#about"><span>level 1</span></a></li>
                            <li><a href="#contact"><span>level 1 line 1<br />line 2</span></a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                <ul class="dropdown-menu dropdown-menu-first-level" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li> 
                        </ul> 
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

在 a 元素上设置 display:block，而不是 display: inline-table;

.navbar .navbar-nav > li > a {
   display: block;
   height: 100%;
}

Updated FIDDLE

注意:如果出于某种原因你需要在 a 元素上设置 display: inline-table;，那么

只需确保表的直接子代具有以下规则:

1) 显示:表格单元格； 2) vertical-align: middle;

在这种情况下:

.navbar .navbar-nav > li > a span {
    display: table-cell;
    vertical-align: middle;
}

FIDDLE