html - 一次居中垂直图像和 UL (HTML CSS)
问题描述
我实际上正在尝试为网站设计导航栏,但我遇到了问题,我有一个徽标显示在左侧,UL 显示在导航右侧,我已经创建了这两个,现在我希望它们都在他们的中心垂直div 容器,不幸的是我无法居中垂直 UL 标记,需要一些 css 或 html 帮助!
这里我附上html
header {
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../../img/static/cover.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.div_nav {
overflow: auto;
width: 80%;
margin: 0px auto;
padding: 16px 32px;
background-color: rgba(139, 0, 139, 0.459);
}
.nav_logo {
background-color: darkorange;
height: 72px;
width: auto;
}
.nav_ul {
background-color: darkslateblue;
float: right;
margin: auto 0px;
list-style: none;
}
.nav_ul li {
margin-left: 16px;
display: inline-block;
}
.nav_ul li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}
<header>
<nav>
<div class="div_nav">
<img src="././img/static/logo.png" alt="Bbooster_Logo" class="nav_logo">
<ul class="nav_ul">
<li><a href="#">Para</a></li>
<li><a href="#">Sagro</a></li>
<li><a href="#">Miasa</a></li>
<li><a href="#">Varga</a></li>
</ul>
</div>
</nav>
</header>
解决方案
为类添加flex
规则并从.div_nav
类中删除,因为已使用float: right
.nav_ul
justify-content: space-between
header {
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../../img/static/cover.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.div_nav {
display: flex;
align-items: center;
justify-content: space-between;
overflow: auto;
width: 80%;
margin: 0px auto;
padding: 16px 32px;
background-color: rgba(139, 0, 139, 0.459);
}
.nav_logo {
background-color: darkorange;
height: 72px;
width: auto;
}
.nav_ul {
background-color: darkslateblue;
/*float: right;*/
margin: auto 0px;
list-style: none;
}
.nav_ul li {
margin-left: 16px;
display: inline-block;
}
.nav_ul li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}
<header>
<nav>
<div class="div_nav">
<img src="././img/static/logo.png" alt="Bbooster_Logo" class="nav_logo">
<ul class="nav_ul">
<li><a href="#">Para</a></li>
<li><a href="#">Sagro</a></li>
<li><a href="#">Miasa</a></li>
<li><a href="#">Varga</a></li>
</ul>
</div>
</nav>
</header>
推荐阅读
- permissions - 如何使用 devicepolicymanager 为我的设备所有者应用程序在 android 10 中获取 android.permission.ACCESS_BACKGROUND_LOCATION?
- flutter - 如何使用 FutureBuilder 等待从屏幕或对话框返回数据?
- vba - VBA 命名范围
- javascript - 当消息 ID 末尾有重复数字时,设置消息不显示
- python - 条件语句的优先顺序
- node.js - 加密/解密sails.js 特定模型值如何工作?
- python - 如何将现有的 django 项目移动到 pycharm
- google-sheets - 如何使用导入范围将内容导入单个单元格而不是整行?
- java - 如何停止多个线程更新全局变量?
- r - R 对象未在运行时环境中正确存储