1

我最近开始使用 Twitter Bootstrap。创建导航栏时，当我添加徽标时，我的登录项会向上移动，而不是居中。

这是在栏的最左侧添加徽标的外观（您看不到图片中的徽标）。我希望“登录”项目位于黑色导航栏的中间。有任何想法吗？它看起来像徽标将条向下拉伸，在下面留下黑色空间，这可能是我的垂直分隔线没有到达底部的另一个原因。

这是一张图片：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 将徽标图像的大小设置为明显小于当前的大小（高度：30px；）。

  3. 使用 CSS 将导航设置为固定高度并添加溢出：隐藏，以便图像不会溢出。（高度：30px；溢出：隐藏；）。

于 2012-07-10T07:11:12.480 回答