如何在导航栏中对齐h4和img元素？
[英]How to align a h4 and img element within a navbar?
问题描述
一项家庭作业要求创建一个导航/导航栏区域，该区域包括可折叠按钮之前的div（带有图像和标题）。
我希望图像和标题并排对齐，并且在端口/屏幕尺寸更改时不消失。
<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>
如下面的代码所示，问题在于图像和标题彼此堆叠。 谁能指出我做错了/应该做的事情？
1 个解决方案
解决方案1
0 已采纳 2019-09-12 03:20:41
您可以使用inline-block ，但是我建议您学习flexbox。 这是您要找的东西吗？
.nav-inline { display: flex; align-items: center; } .nav-inline h4 { margin: 0; }
<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 class="nav-inline"> <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>
在引导网格中对齐 h4
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.