Html 如何在导航栏中对齐h4和img元素？
家庭作业要求创建一个导航/导航栏区域，该区域包含一个div，带有一个图像和一个标题，位于可折叠按钮之前 我希望图像和标题并排对齐，而不是在端口/屏幕大小更改时消失Html 如何在导航栏中对齐h4和img元素？,html,twitter-bootstrap,bootstrap-4,Html,Twitter Bootstrap,Bootstrap 4,家庭作业要求创建一个导航/导航栏区域，该区域包含一个div，带有一个图像和一个标题，位于可折叠按钮之前 我希望图像和标题并排对齐，而不是在端口/屏幕大小更改时消失 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="htt
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-dark bg-secondary">
<div>
<img src="steve_headset_sm5.jpg" class="navbar-brand" alt="steve_with_headset">
<h4>My Website 3.0</h4>
</div>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link">Main Content</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Python</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">SQL</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">JavaScript</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">PHP</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</div>
</nav>
我的网站3.0
-
-
-
-
-
-
正如下面的代码所示，问题在于图像和标题堆叠在彼此的顶部。有人能告诉我我做错了什么/应该做什么吗？您可以使用
内联块.nav内联{
显示器：flex；
对齐项目：居中；
}
.导航直列h4{
保证金：0；
}
我的网站3.0
-
-
-
-
-
-