0

nav bar 内のテキストを垂直方向に揃えようとしています。

Vertical-align を使用してみました。しかし、うまくいきません。

また、高さが実際に内側に揃うようにしました。

また、パラログラム/長方形であるページの最後までナビゲーションバーを埋める方法はありますか。リンクの右側に空白がないようにします。したがって、実質的には、パラログラムで分割された 1 つの長いバーです。

http://jsfiddle.net/Z4kUm/

 <ul id="navlist">
                        <li><a><span>Link</span></a></li>
                        <li><a><span>Link</span></a></li>
                        <li><a><span>Link</span></a></li>
                         <li><a><span>Link</span></a></li>
                    </ul>

私のCSS：

ul#navlist {
    padding:10px;
    font: bold 12px Arial, sans-serif;
   display: inline;
}

ul#navlist li {
    float:left;
    margin-right:20px;
    display:inline-block;
    zoom:1;
    position:relative;
    width:125px;
    height: 50px;
    list-style: none;
    color:#757575;
}

ul#navlist li a {
    display: inline-block;
    vertical-align: middle;
    text-decoration:none;
    padding:5px 10px;
    transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
     width:115px;
     height: 40px;

}

ul#navlist li a span 
{
    width: 100%;
    height: 40px; 
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    transform: skewX(20deg);
    -o-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
}

ul#navlist li a {
    background:#AAA;
}
4

1 に答える 1

1

line-heightスパンの高さに一致するようにプロパティを設定します。

jsFiddleの例

ul#navlist li a span 
{
    width: 100%;
    height: 40px; 
    line-height:40px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    transform: skewX(20deg);
    -o-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
}
于 2013-02-12T16:18:03.647 に答える