一行中有两个元素，一个左对齐，一个居中，怎么做？
一行中有两个元素，一个左对齐，一个居中，怎么做？
提问于 2021-12-19 15:19:26
我有两个要素:后退按钮和标题。两者应位于同一行，后退按钮应左对齐，标题应居中。
让我们以这个例子为例：
<div class="wrapper">
<div class="button">
<button>Back</button>
<div class="headline">
<h2>Headline</h2>
</div>
</div>
</div>要获得这个结果，我必须在CSS中做些什么：图像
我试着使用翻译X，但这个解决方案当然不是一个响应性的解决方案，这就是为什么我要搜索一个所有的视图端口。
非常感谢，周末好好休息！
回答 6
Stack Overflow用户
发布于 2021-12-19 15:34:03
使用柔性盒将所有的东西放在包装中，然后用绝对位置将按钮移到左边。
.wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
button {
position: absolute;
left: 0;
}<div class ="wrapper">
<button>Back</button>
<h2>Headline</h2>
</div>
Stack Overflow用户
发布于 2021-12-19 15:30:35
如果您知道这只是.wrapper容器中的这两个元素，那么这里有一个简单的方法。
您所做的是将.wrapper设置为position: relative;，然后将.button设置为position: absolute; --这将允许您在.wrapper中定位.button，而不会占用div中的任何空间。然后将.header设置为width: 100%;和text-align: center;
您将需要玩移动，因为按钮将跨越标题，在这一点上，我可能会堆叠的元素，使用户更容易单击后退按钮。
.wrapper {
position:relative;
background: #dedede;
}
.button {
position:absolute;
left:0;
top:50%;
transform:translate(0, -50%);
}
.headline {
width:100%;
text-align:center;
}<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
Stack Overflow用户
发布于 2021-12-19 15:30:49
这个解决方案是使用css flex。
.wrapper{
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: baseline;
}
.headline{
display: flex;
flex-direction:row;
justify-content: center;
width:100%;
}<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70412700
复制相关文章
相似问题
腾讯云开发者
