顶部导航栏

顶部导航栏

关注
发信
关注(28)粉丝(399)

html - 如何使顶部导航栏对齐

我试图将顶部导航栏的左侧徽标和中心文本以及右侧文本作为徽标的大小。我能够在顶部导航栏上创建左侧徽标，并在顶部导航栏的右侧上创建文本，但无法在其他顶部导航栏的中央制作一些文本，甚至遇到使右侧文本变大的问题（我尝试添加clearflex）大小作为徽标。



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->

<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
	rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.bs-example {
	margin: 20px;
	font-weight: 700px;
}


</style>

</head>

<body>


	<!------Top navbar------------->
	<div class="navbar navbar-default navbar-fixed-top">
		<div class="container fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
					height="48" width="202" class="pull-left"></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">

				<ul class="nav navbar-nav">
					<li class="active"><a href="#"
						style="color: blue; margin-left: 6em">Ticket top displaying
							important things/ messages/ reminders/ tax dates/ Times
							reminders </a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><div class="navbar-brand">Experiencing </div></li>
					<!--    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color: blue;">First Name Last name <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <center> <li><a href="#">Logout</a></li></center>

          </ul>
        </li>-->
				</ul>
				<!-- /.navbar-collapse -->

			</div>

		</div>
	</div>

</body>
</html>





我试图做这样的形象：

最佳答案

添加这些样式

.navbar-default .navbar-brand {
   padding: 0;
   display: flex;
   align-items: center;
 }





<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Theme CSS -->

<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">

<script
	src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.bs-example {
	margin: 20px;
	font-weight: 700px;
}
.navbar-default .navbar-brand {
   padding: 0;
   display: flex;
   align-items: center;
 }

</style>

</head>

<body>


	<!------Top navbar------------->
	<div class="navbar navbar-default navbar-fixed-top">
		<div class="container fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
					height="48" width="202" class="pull-left"></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">

				<ul class="nav navbar-nav">
					<li class="active"><a href="#"
						style="color: blue; margin-left: 6em">Ticket top displaying
							important things/ messages/ reminders/ tax dates/ Times
							reminders </a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><div class="navbar-brand">Experiencing </div></li>
					<!--    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color: blue;">First Name Last name <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <center> <li><a href="#">Logout</a></li></center>

          </ul>
        </li>-->
				</ul>
				<!-- /.navbar-collapse -->

			</div>

		</div>
	</div>

</body>
</html>

关于html - 如何使顶部导航栏对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50720971/

10-12 13:05
Powered by LMLPHP ©2024 顶部导航栏 0.028819