如何解决如何在不使用绝对值的情况下将元素放置在父元素中
我正在尝试为我的网页创建一个简单的标题,但我想将后退按钮放置在div容器内,使其向左浮动,但同时,“标题”文本应出现在“父项”的中心div”。
我尝试在按钮上使用左移,但是问题是它使标题文本换行并且文本显示在div中心(右移)附近。
因此,我尝试使用flex并得到以下代码:
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<button class="btn btn-primary align-self-start">
Go back
</button>
<div class="align-self-center">
Header
</div>
</h2>
</div>
使用flex,标题显示如下:
但是在这里,我希望按钮和标题彼此并排放置。因此,必须以某种方式向上移动文本。
有人可以建议这种方法更好的替代方法,还是可以解决该方法呢?
解决方法
我了解到您希望在“标题”文本的左侧具有按钮,使父级具有center
text-align
,然后将按钮置于标题div
内,然后将其设置为float:left
可确保Heading div不会阻塞对齐。
另外,请注意background-color:red;
和background-color:green;
只是为了演示外观
.container{
background-color:red;
text-align:center;
}
.align-self-center{
background-color:green;
}
button{
float:left
}
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<div class="align-self-center">
<button class="btn btn-primary align-self-start">
Go back
</button>
Header
</div>
</h2>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。