引導navbar-brand將鏈接文本與svg對齊
[英]bootstrap navbar-brand align link text with svg
問題描述
我正在嘗試使用bootstrap的.navbar-brand類在導航.navbar-brand一個svg，但我希望文本位於該svg旁邊，並使其與該svg對齊。 我在導航欄中有svg和文本，但它們沒有對齊。 這是標題的代碼。
nav a{ color: white } nav {background-color: #1c71b9; z-index: 1;} .navbar-toggle{border: 3px solid white;} .icon-bar{background-color: white;} .navbar-brand:hover{background-color: white; color: #1c71b9; } body{margin-top: 50px; background-color: white;} h1, h2, h3, h4, h5, h6, p{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .row + .row{margin-top: 20px;} .itemHeading{font-weight: bold;} .icon{display: block; max-width: 100%; margin-top: 10px;} .descriptionHeading{margin-top: 20px; text-align: center;} .descriptionSection{background-color: #e5e5e5;} .mainDescriptionHeading{text-align: center;} .descriptionParagraph{text-align: center;} .centerDescriptionButton{padding-bottom: 20px;} .first-slide video{width: 100%;} .second-slide video{width: 100%;} .third-slide video{width: 100%;} .first-slide{width: 100%;} .second-slide{width: 100%;} .third-slide{width: 100%;} #myCarousel{margin-top: 50px;} .card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;} .card video{width:100%;} .card-title{font-weight: bold;} .error{color: red;} .success{color: green;} .formQuestion{color: darkblue;} .overlay{position: absolute; display: flex; top: 0; bottom: 0px; left: 0; right: 0; align-items: center; justify-content: center; flex-direction: column; color: white; text-align: center; } .overlay .videoButtonWrapper{ flex-direction: row; margin-bottom: 30px; position: relative; } .videoBackgroundWrapper{position: relative; width: 100%;} .videoBackground{width: 100%;} .blue{color: darkblue; background-color: darkblue;} #signupApp{margin-top: 50px;} nav svg{ height: 100%; fill: white;} .navbar-brand{margin: 0; padding: 0;} .navbar-brand:hover>svg{height: 100%; fill: #1c71b9;} .formQuestion + .tooltip>.tooltip-inner{background-color: darkblue; font-weight:bold;} .success + .tooltip>.tooltip-inner{background-color: green; font-weight:bold;} .error + .tooltip>.tooltip-inner{background-color: red; font-weight:bold;}
<head> <!--vuejs--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> </head> <body> <div id="logInApp" v-cloak> <nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <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="index.php"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 171 171" style="enable-background:new 0 0 171 171;" xml:space="preserve"> <path class="st0" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48 c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9 c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1 l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9 v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7 l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1 l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/> <text transform="matrix(1 0 0 1 145.3561 17.4842)">TM</text> </svg> CreativeEngine</a> </div><!--end .navbar-header--> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li v-show="admin==1"><a href="adminMenu.php">Admin</a></li> <li><a href="#">Subscriptions</a></li> <li><a href="#">Templates</a></li> <li><a href="#">Stock</a></li> <li v-show="sesloggedin==0"><a href="#" data-toggle="modal" data-target="#loginModal">Login</a></li> <li v-show="sesloggedin==1"><a href="logout.php">Logout</a></li> <li><a href="#">Signup</a></li> </ul> </div><!--end #navbar--> </div><!--end container--> </nav>
2 個解決方案
解決方案1
1 已采納 2018-07-09 15:23:52
添加.logo-text { position:relative; top:-3px; margin-left:5px; } .logo-text { position:relative; top:-3px; margin-left:5px; } .logo-text { position:relative; top:-3px; margin-left:5px; }到CSS。 然后將文本（CreativeEngine）放在一個跨度中，並為其指定類：“徽標文本”。
請參閱以下示例：
nav a{ color: white } nav {background-color: #1c71b9; z-index: 1;} .navbar-toggle{border: 3px solid white;} .icon-bar{background-color: white;} .navbar-brand:hover{background-color: white; color: #1c71b9; } body{margin-top: 50px; background-color: white;} h1, h2, h3, h4, h5, h6, p{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .row + .row{margin-top: 20px;} .itemHeading{font-weight: bold;} .icon{display: block; max-width: 100%; margin-top: 10px;} .descriptionHeading{margin-top: 20px; text-align: center;} .descriptionSection{background-color: #e5e5e5;} .mainDescriptionHeading{text-align: center;} .descriptionParagraph{text-align: center;} .centerDescriptionButton{padding-bottom: 20px;} .first-slide video{width: 100%;} .second-slide video{width: 100%;} .third-slide video{width: 100%;} .first-slide{width: 100%;} .second-slide{width: 100%;} .third-slide{width: 100%;} #myCarousel{margin-top: 50px;} .card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;} .card video{width:100%;} .card-title{font-weight: bold;} .error{color: red;} .success{color: green;} .formQuestion{color: darkblue;} .overlay{position: absolute; display: flex; top: 0; bottom: 0px; left: 0; right: 0; align-items: center; justify-content: center; flex-direction: column; color: white; text-align: center; } .overlay .videoButtonWrapper{ flex-direction: row; margin-bottom: 30px; position: relative; } .videoBackgroundWrapper{position: relative; width: 100%;} .videoBackground{width: 100%;} .blue{color: darkblue; background-color: darkblue;} #signupApp{margin-top: 50px;} nav svg{ height: 100%; fill: white;} .navbar-brand{margin: 0; padding: 0; position:relative; } .navbar-brand:hover>svg{height: 100%; fill: #1c71b9;} .formQuestion + .tooltip>.tooltip-inner{background-color: darkblue; font-weight:bold;} .success + .tooltip>.tooltip-inner{background-color: green; font-weight:bold;} .error + .tooltip>.tooltip-inner{background-color: red; font-weight:bold;} .logo-text { position:relative; top:-3px; margin-left:5px; }
<head> <!--vuejs--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> </head> <body> <div id="logInApp" v-cloak> <nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <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="index.php"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 171 171" style="enable-background:new 0 0 171 171;" xml:space="preserve"> <path class="st0" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48 c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9 c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1 l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9 v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7 l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1 l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/> <text transform="matrix(1 0 0 1 145.3561 17.4842)">TM</text> </svg> <span class="logo-text">CreativeEngine</span></a> </div><!--end .navbar-header--> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li v-show="admin==1"><a href="adminMenu.php">Admin</a></li> <li><a href="#">Subscriptions</a></li> <li><a href="#">Templates</a></li> <li><a href="#">Stock</a></li> <li v-show="sesloggedin==0"><a href="#" data-toggle="modal" data-target="#loginModal">Login</a></li> <li v-show="sesloggedin==1"><a href="logout.php">Logout</a></li> <li><a href="#">Signup</a></li> </ul> </div><!--end #navbar--> </div><!--end container--> </nav>
解決方案2
0 2018-07-09 15:37:31
這就是你所需要的。 將以下行添加到CSS。
.icon {
display: inline-flex;
align-self: center;
}
.icon svg, .icon img {
height: 1em;
width: 1em;
fill: currentColor;
}
.icon.baseline svg, .icon img {
top: .125em;
position: relative;
}
h1 {
margin:0 0 5px 0;
padding:0;
line-height:1;
font-weight:normal;
position:relative;
}
h1 {
font-size:69px;
}
這將是HTML
<h1>
<div class="icon baseline">
<svg width="58" height="58" viewBox="1 1 180 150">
<path class="icon-info" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48 c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9 c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1 l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9 v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7 l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1 l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/>
</path>
</svg>
</svg>
</div>
TM
</h1>
Bootstrap - Align.navbar-brand 到中心但折疊時不垂直
[英]Bootstrap - Align .navbar-brand to the center but not vertically when collapsed
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.