1

リンクが 1 行と 2 行のメニューがあります。テキストを垂直方向に揃える方法が見つかりません。私のコードを修正する方法についてのアイデアは素晴らしいでしょう。

CSS:

ul {
    margin: 0;
    padding: 0;

}
ul.menu {
    height: 100px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
    display: table-row;   
}

ul.menu li {
    list-style: none;
    float:left;
    height: 99px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background: rgba(191,232,108,1);

    }

ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    height:99px;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 21px;
    color: #371C1C;
    background : rgb(168,168,168);

    }

ul li a:hover {
    background: transparent none;
    color: #fff;
}

ul li.active a{
    color: #0f0;
    background:rgba(31,169,244,1);
}
span {
  display: table-cell;
  vertical-align: middle;
  }

HTML、ここで私は行を分割するいくつかの方法を試しました:

 <div class="wrapper">
<div class="container">
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#"><span>bla bla<br/> blabla bla</span></a></li>
<li><a href="#">Twitter bla<br/> blabla bla</a></li>
<li><a href="#">Twitter bla blabla bla</a></li>

</ul>
</div>
</div>
4

3 に答える 3

3

動く：

display: table-cell;
vertical-align: middle;

.. A-tag CSS 宣言に、そして.. からLI。

display: position:一般に、( と 以外のfloat:) すべてのスタイリングをリストではなく A タグに配置すると、全体的な頭痛の種が少なくなることがわかります。

私のチュートリアルI Love Lists を参照してください。

于 2013-02-11T20:37:53.777 に答える
0

タグの行の高さを自分のタグの高さと同じにすることができaますli

于 2013-02-11T20:45:07.260 に答える
-2 
<div id="midalign">
    <ul>
        <li><a>Home</a></li>
        <li><a>About Us a very long link </a></li>
        <li><a>Forum</a></li>
    </ul>
</div>

CSS code:
#midalign ul {
    display:table-cell;
    vertical-align:middle;
    list-style:none;
    height:100px;
}

#midalign li {
    float:left;
    margin-right:30px;
    width:100px;
}
于 2013-03-27T01:48:44.820 に答える