我正在尝试使用引导程序的.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>
答案 0 :(得分：1)
将.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>
答案 1 :(得分：0)
这就是您所需要的。 将以下行添加到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>