Question

在问题中:)我想将我的文本放在链接中。我试图在没有srcipt的情况下处理这个问题，但我的想法并不奏效。另外，我不想失去100％的高度＆＃34; a＆＃34;元素。提前感谢您解决我的问题。我正在使用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

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

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

<强> Updated FIDDLE

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

确保表的直接子项具有以下规则：

1）display: table-cell; 2）vertical-align: middle;

在这种情况下：

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

<强> FIDDLE

如何在内联表中应用vertical-align

1 个答案: