对齐导航栏中的项目答案

【问题标题】：Align items in navigation bar对齐导航栏中的项目
【发布时间】：2015-12-18 04:46:33
【问题描述】：

Ciao！我在网站顶部有一个导航栏，只有两个元素：菜单图标和品牌标志（埃菲尔铁塔）。这个想法是将埃菲尔铁塔图像放在导航栏的中心，将菜单图标放在导航栏的最左侧（在 withe 区域），但我在 CSS 中正确放置它时遇到了一些麻烦。

text-align: center 似乎不起作用，所以我设置了一些padding 命令，但我认为这不是一个好的解决方案。而且我不知道如何将fa fa-bar 放在左边。我需要帮助！你能看看吗？

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JFP</title>
  <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
  <link rel="stylesheet" href="/static/main.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="/static/app.js"></script>
  <title>Untitled Document</title>
  
  <style>
    .nav {
    	list-style:none;
    	margin:0 8%;
    	padding:0;
    	position:relative;
    	text-align:center;
    	background: rgb(51,51,51);
    	color:rgb(51,51,51);
    	font-size:140%;
    	padding:0px 10px;
    	font-family:Arial, Helvetica, sans-serif;
    border-bottom-left-radius: 120px;
    border-bottom-right-radius: 120px;
    }
    .nav li {
    	position:relative;
    	z-index:2;
    	display:inline-block;
    	vertical-align:bottom;
    	text-transform:uppercase;
    }
      
    .nav a, .nav span {
    	display:block;
    	color:#fff;
    	text-decoration:none;
    	margin:0 20px;
    padding-right: 80px;
    }
      
    .nav a:visited{
      color:rgb(51,51,51)
    }
      
    .nav:after{
    	content:"";
    	position:absolute;
    	top:0;
    	bottom:50%;
    	right:0;
    	left:0;
    	background: rgb(51,51,51);
    }
      
    .nav span{
    	width:186px;
    	height:77px;
    	background:rgba(255,255,255, 0.3);
    	font-size:77px;	
    	overflow:hidden;
    }
      
    .nav #brand {
      height: 160px;
      width: 80px;
      position: absolute;
    }
    
    .nav #fafa {
      font-size: 30px;
      color: rgb(42, 186, 214);
    }
  </style>
</head>

<body>
  <ul class="nav center">
    <li><i id="fafa" class="fa fa-bars"></i></li>
    <li class="logo"><span><img id="brand" alt="Brand" src="https://photos-3.dropbox.com/t/2/AACJhIINsVBRwEqcMxgWNfqZu5OrjdJRMjG46W7GeV_ttw/12/5046553/jpeg/32x32/1/_/1/2/Eiffeltoren-logo.jpg/EOzL4wMYgEUgASgB/M6Hyu4cmSoxBTnl8a18nWaMYKaQpYmF2AznL32KgdT0?size=1024x768&size_mode=2"></span></li>
  </ul>
</body>

</html>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

您可以在包含菜单图标的li 上使用float: left，如下所示：

http://jsfiddle.net/swm53ran/322/

<ul class="nav center">
    <li class="menubar"><i id="fafa" class="fa fa-bars"></i></li>
    <li class="logo"><span><img id="brand" alt="Brand" src="https://photos-3.dropbox.com/t/2/AACJhIINsVBRwEqcMxgWNfqZu5OrjdJRMjG46W7GeV_ttw/12/5046553/jpeg/32x32/1/_/1/2/Eiffeltoren-logo.jpg/EOzL4wMYgEUgASgB/M6Hyu4cmSoxBTnl8a18nWaMYKaQpYmF2AznL32KgdT0?size=1024x768&size_mode=2"/></span></li>
</ul>
.nav .menubar {
    float: left;
}

更新：白色区域有菜单：http://jsfiddle.net/swm53ran/325/

margin-left: -55px;

【讨论】：

是否有可能将左侧的菜单图标从灰色区域移到白色区域？

【解决方案2】：

有两种方法可以选择。要么使用float 属性，就像这样：

float: left;

或者，您可以设置position: absolute;，然后像这样使用left 属性：

left: 10px;

您可以从this 链接中找到有关如何在 CSS 中水平对齐元素的更多信息。

【讨论】：

是否有可能将左侧的菜单图标从灰色区域移到白色区域？
您可以将.nav #fafa 更改为：.nav #fafa { font-size: 30px; color: rgb(42, 186, 214); position: absolute; left: -30px; }