我最近开始使用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;
}
最佳答案
垂直居中很麻烦-有很多方法可以做到,但由于您的情况会不必要地复杂,因此不建议使用。最好给导航器固定的高度,然后显式移动按钮或徽标(例如,根据您的建议使用顶部填充),以使所有内容正确居中。
这些方面还有其他可能的解决方案:
使用不拉长导航栏的徽标图像的较小版本。
使用CSS将徽标图片的尺寸设置为明显小于当前尺寸的图片(高度:30像素;)。
使用CSS将导航设置为固定高度,并添加overflow:hidden,以便图像不会溢出。 (高度:30px;溢出:隐藏;)。
关于html - 添加徽标时导航栏中的元素向上移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11406955/