Question

我很难将导航栏上的徽标集中在我正在处理的网站上。我尝试了一些事情，但没有成功。我希望徽标位于导航栏的中心，其他项目位于导航栏的左侧和右侧。目前，所有内容均匀分布，包括徽标，因此不会居中。任何帮助将不胜感激。

HTML

 <nav class="main-nav-outer" id="test">
        <div class="container">
            <ul class="main-nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#service">Services</a></li>
                <li><a href="#SeasonalSpecials">Seasonal Specials</a></li>
                <li class="small-logo">
                    <a href="#header"><img src="img/logo.png" alt=""></a>
                </li>
                <li><a href="#Products">Products</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#contactbanner">Contact</a></li>
            </ul>
            <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
        </div>
    </nav>

CSS

    .main-nav-outer{
    padding:0px;
    border-bottom:1px solid #dddddd;
    box-shadow:0 4px 5px -3px #ececec;
    position:relative;
    background:#fff;
}
.main-nav{
    text-align:center;
    margin:10px 0 0px;
    padding:0;
    list-style:none;
}
.main-nav li{
    display:inline;
    margin:0 1px;
}
.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{
    text-decoration:none;
    color: #ec5020;
}

.small-logo{
    padding:0 32px;
  margin: 0;
}

.main-section{
    padding:20px 0 110px;
}

Answer 1

你可能想使用bootstrap并尝试这样的事情

<nav class="main-nav-outer" id="test">
        <div class="container">
            <ul class="main-nav">
                <div class="row">
                    <div class="col-xs-5">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#service">Services</a></li>
                        <li><a href="#SeasonalSpecials">Seasonal Specials</a></li>
                    </div>
                    <div class="col-xs-2">
                        <li class="small-logo">
                            <a href="#header"><img src="img/logo.png" alt=""></a>
                        </li>
                    </div>
                    <div class="col-xs-5">
                        <li><a href="#Products">Products</a></li>
                        <li><a href="#team">Team</a></li>
                        <li><a href="#contactbanner">Contact</a></li>
                    </div>
                </div>
            </ul>
            <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
        </div>
    </nav>

只需使用以下代码

更改CSS中的此选择器

.main-nav li a {
            display: inline-block;
            color: #222222;
            text-transform: uppercase;
            font-family: 'Montserrat', sans-serif;
            text-decoration: none;
            line-height: 20px;
            margin: 17px 10px;
            transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
        }

Answer 2

HTML：

<nav class="main-nav-outer" id="test">
    <div class="container">
        <ul class="main-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service">Services</a></li>
            <li><a href="#SeasonalSpecials">Seasonal Specials</a></li>
            <li class="small-logo">
                <a href="#header"><img src="img/logo.png" alt=""></a>
            </li>
            <li><a href="#Products">Products</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#contactbanner">Contact</a></li>
        </ul>
        <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
    </div>
</nav>

CSS：

.main-nav-outer{
    padding:0px;
    border-bottom:1px solid #dddddd;
    box-shadow:0 4px 5px -3px #ececec;
    position:relative;
    background:#fff;
}
.main-nav{
    margin-left:auto;
    margin-right: auto;
    list-style:none;
}
.main-nav li{
    display:inline;
}
.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{
    text-decoration:none;
    color: #ec5020;
}

.small-logo{
    padding:0 32px;
}

.main-section{
    padding:20px 0 110px;
}

Bootply

Answer 3

试试这个：

＆＃13;

.navbar-brand {
  float: left;
  text-align: center;
  width: 378px;
}
.navbar-brand span {
  margin: 0 auto;
  text-align: center;
  color:green;
} 
.navbar-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    line-height:20px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-fixed-top navbar-custom ">
	  <div class="container" >
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		  </button>
		  <a class="navbar-brand visible-xs" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
		</div>
		<div class="collapse navbar-collapse">
		  <ul class="nav navbar-nav navbar-left">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#about">Menu Item 1</a></li>
			<li><a href="#contact">Menu Item 2</a></li>
			
		  </ul>
		  <a class="navbar-brand hidden-xs text-center" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
		  <ul class="nav navbar-nav navbar-right">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#about">Menu Item 1</a></li>
			
		  </ul>
		</div>
	  </div>
	</nav>

＆＃13;

当您点击展开代码段时，您会看到结果..

如何在导航栏中居中徽标

3 个答案: