-1

テキストは、ナビゲーション バーの中央 (垂直方向) に配置されるはずです。

コードが機能しません。

誰でも理由を説明できますか？

<style>
#navigationbar { 
background: rgb(252,219,121);
background: -moz-linear-gradient(top,  rgba(252,219,121,1) 2%, rgba(254,191,1,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(252,219,121,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: -o-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: -ms-linear-gradient(top,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%); 
background: linear-gradient(to bottom,  rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb79', endColorstr='#febf01',GradientType=0 );
height: 40px;
}

#logo {
color:white;
vertical-align:middle;
margin-left:10px;
}

* { 
margin:0px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">

<div id='navigationbar'>
    <a id='logo' href='http://localhost/'>WORK.</a>
</div>
4

4 に答える 4

2

vertical-aligndisplayは、特定のプロパティ (通常は CSS テーブルプロパティ ( table-cell、tableなど))を持つ要素でのみ機能しますtable-row。

ただし、コンテナーの高さがわかっている場合は、垂直方向に中央揃えにする簡単な方法があります。CSSに追加line-height: 40pxするだけ#logoです (コンテナに追加することもできますが、この場合は違いはありません)。

#logo {
    color:white;
    line-height: 40px;
    margin-left:10px;
}

を使用したい場合は、コンテナ ( )vertical-alignに設定する必要があります。これにより、同じ効果が得られます。display: table#navigationbardisplay: table-cell#logovertical-align: middle

于 2013-10-02T12:35:51.477 に答える
1

これを現在の CSS に追加します (デモはこちら):

#navigationbar {
    width: 100%;
    display: table;
}

#logo {
    display: table-cell;
}

@エンヌイが言ったように：

vertical-alignは、特定のプロパティ (通常は CSS テーブル表示プロパティ ( table-cell、tableなどtable-row)) を持つ要素でのみ機能します。

于 2013-10-02T12:41:08.437 に答える
1

line-height:33px; を使用できます。ですが、「a タグ」を「div タグ」にラップすることもお勧めします。これにより、後で操作しやすくなります。例：

<style>
#logo {
width: 30px;
height: 40px;   
    margin-left: 10px;
}
#logo a{
color: white;
line-height: 33px;
}
</style>
<body>
<div id='navigationbar'>
    <div id='logo'><a href='http://localhost/'>WORK.</a></div>
</div>
</body>

後でそのロゴを移動する必要がある場合は、#logo で絶対値を使用すると簡単です。

于 2013-10-02T13:13:42.820 に答える