1

最近、TwitterBootstrapを使い始めました。ナビゲーションバーを作成するときに、ロゴを追加すると、ログイン項目が中央ではなく上に移動します。

これは、バーの左端にロゴが追加された場合の外観です（画像にはロゴが表示されていません）。「ログイン」アイテムを黒いナビゲーションバーの中央に配置したいと思います。何か案は？ロゴがバーを下に伸ばし、下に黒いスペースを残しているように見えます。これは、垂直仕切りが下部に届かないもう1つの理由である可能性があります。

ここに写真があります：http： //i.imgur.com/hL3nQ.png

ナビゲーションバーのコードは次のとおりです。

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<!-- Your site name for the upper left corner of the site -->
<a class="brand"><img name="" src="logo.png"  alt=""></a>

<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->

<!-- The drop down menu -->
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li class="drop down">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Log In <strong     
class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form action="CheckLogin.php" method="post" accept-charset="UTF-8">
<input id="username" style="margin-bottom: 15px;" type="text" name="username" size="30"
placeholder="Email"/>
<input id="password" placeholder="Password" style="margin-bottom: 15px;" 
type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" 
name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>

<input id = "submit" name = "submit" class="btn btn-primary" style="clear: left; width:
 100%; height: 32px; font-size: 13px;" type="submit" value="Log in" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

編集：このCSSルールを追加すると修正されますが、他に解決策はありますか？

.nav li
{
padding-top:5px;
}
4

1 に答える 1

1

垂直方向のセンタリングは面倒です。それを行う方法はいくつかありますが、状況によっては不必要に複雑になるため、お勧めしません。ナビゲーションの高さを固定し、ボタンまたはロゴを明示的に移動して（たとえば、提案したように上部のパディングを使用して）、すべてが適切に中央に配置されるようにすることをお勧めします。

これらの線に沿って他の可能な解決策があります：

  1. ナビゲーションバーを引き伸ばさない小さいバージョンのロゴ画像を使用します。

  2. CSSを使用して、ロゴ画像のサイズを現在よりも明示的に小さいサイズ（height：30px;）に設定します。

  3. CSSを使用してナビゲーションを固定の高さに設定し、overflow：hiddenを追加して、画像がこぼれないようにします。（高さ：30px;オーバーフロー：非表示;）。

于 2012-07-10T07:11:12.480 に答える