时间戳

首页 > 解决方案 > 如何在不使用absolute的情况下将元素定位在父元素内

html - 如何在不使用absolute的情况下将元素定位在父元素内

问题描述

我正在尝试为我的网页制作一个简单的标题，但我想将我的后退按钮放置在我的 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，标题显示如下：


但是在这里，我希望按钮和标题彼此并排放置。因此，文本必须以某种方式向上移动。

有人可以建议一些更好的替代方法或如何解决这个问题吗？

标签： htmlcssbootstrap-4

解决方案

我了解您希望将按钮放在“标题”文本的左侧，使父级具有center text-align并将按钮放在标题内div并float:left确保标题 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>

推荐阅读