0
내 탐색 막대에 이미지 아이콘 (높이가 기본 탐색 모음 높이보다 높음)을 추가하고 싶습니다. 하지만 추가 할 때 탐색 바 높이가 늘어나지 만 다른 항목의 위치는 동일하게 유지됩니다. 즉, 수직으로 가운데 정렬되지 않습니다. 어떤 모양인지 알 수 있습니다 (here). 다음은 내 html 파일입니다 : -항목의 이미지 크기가 기본 탐색 모음 높이 이상인 경우 탐색 모음 항목의 위치는 동일하게 유지됩니다.
<!doctype html>
<html>
\t <head>
\t \t <title>Search database</title>
\t \t <!-- Latest compiled and minified CSS -->
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t \t <!-- Optional theme -->
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
\t
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
\t \t <!-- Latest compiled and minified JavaScript -->
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
\t </head>
\t <body> \t
\t \t <nav class="navbar navbar-default navbar-fixed-top">
\t \t <div class="container">
\t \t <!-- Brand and toggle get grouped for better mobile display -->
\t \t <div class="navbar-header">
\t \t \t \t <a href="#"><img src="img/bookurbus-small.png"/></a> \t
\t \t </div>
\t \t <ul class="nav navbar-nav">
\t \t <li class="active"><a href="#">Buses <span class="sr-only"></span></a></li>
\t \t <li><a href="#">Hotels <span class="sr-only"></span></a></li>
\t </ul>
\t <form class="navbar-form navbar-left" role="search" method="get" action="https://www.google.com/search">
\t \t \t <div class="form-group">
\t \t \t \t <input type="text" class="form-control" placeholder="Search on Google" name="q" size="31" value="">
\t \t \t </div>
\t \t \t </form>
\t \t <!-- Collect the nav links, forms, and other content for toggling -->
\t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
\t \t <ul class="nav navbar-nav navbar-right">
\t \t <li><a href="#">About</a></li>
\t \t <li><a href="#">Contact</a></li>
\t \t <li class="dropdown">
\t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account <span class="caret"></span></a>
\t \t <ul class="dropdown-menu">
\t \t <li><a href="#">My Profile</a></li>
\t \t <li><a href="#">Manage Bookings</a></li>
\t \t <li><a href="#">Help Me</a></li>
\t \t <li role="separator" class="divider"></li>
\t \t <li><a href="#">Logout</a></li>
\t \t </ul>
\t \t </li>
\t \t </ul>
\t \t </div><!-- /.navbar-collapse -->
\t \t </div><!-- /.container -->
\t \t </nav>
\t </body>
</html>: -
<style>
.nav, .navbar-form{
position: relative;
top: 10px;
}
</style>
내가 그것을 할 수있는 다른 더 좋은 방법이됩니다 ?