<p>没有在容器中心对齐 [英] <p> not aligning itself in center of container
问题描述
,并且都在一个容器内.我使用 align-items-center 将它们全部对齐在容器内的同一行中.但是,该属性不适用于
标记.我错过了什么?我希望或"与注册和登录按钮对齐.
nav ul{填充:0;显示:弹性;底边距:0;}导航 li{列表样式:无;填充:0 0.2em;}导航{文字装饰:无;}#登录{显示:内联块;最小宽度:最大内容;最大高度:最小内容;边距:0;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><导航><div class="container d-flex align-items-center justify-content-between"><div class="container d-flex align-items-center"><ul><li><a href="#">首页</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li><li><a href="#">关于我们</a></li>
<div class="container-flex d-flex align-items-center"><a href="#" style="white-space: nowrap">注册</a><p style="padding-right: 0.5em; padding-left: 0.5em;">或</p><button class="btn btn-success btn-md" id="login">登录</button>
</nav>
Bootstrap 4 段落 有一个底部边距.使用
mb-0
类将其删除.
<p style="padding-right: 0.5em; padding-left: 0.5em;"class="my-0">或</p>
https://www.codeply.com/go/n337ATFcOh
您可以通过使用 Bootstrap Navbar 或 Nav一>.也没有理由使用嵌套容器.
https://www.codeply.com/go/ZiTM3iuHrd
, and are all inside one container. I've used align-items-center to align them all in the same line inside the container. However that property is not applying to the
tag. What am I missing? I want "or" to be aligned with the sign up and log in button.
nav ul{
padding: 0;
display: flex;
margin-bottom: 0;
}
nav li{
list-style: none;
padding: 0 0.2em;
}
nav a{
text-decoration: none;
}
#login{
display: inline-block;
min-width: max-content;
max-height: min-content;
margin: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
<div class="container d-flex align-items-center justify-content-between ">
<div class="container d-flex align-items-center ">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div class="container-flex d-flex align-items-center">
<a href="#" style="white-space: nowrap">Sign up</a>
<p style="padding-right: 0.5em; padding-left: 0.5em;"> or </p>
<button class="btn btn-success btn-md" id="login">Log in</button>
</div>
</div>
</nav>
Bootstrap 4 paragraphs <p>
have a bottom margin. Use the mb-0
class to remove it.
<p style="padding-right: 0.5em; padding-left: 0.5em;" class="my-0"> or </p>
https://www.codeply.com/go/n337ATFcOh
You could simplify the markup and CSS a lot by utilizing the Bootstrap Navbar or Nav. There is also no reason to use nested containers.
https://www.codeply.com/go/ZiTM3iuHrd
这篇关于<p>没有在容器中心对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!