Question

我有一个H6标签和另一个包含共享同一行（div）的按钮的div。我需要在垂直和水平方向输入h6标签，所以我在其上使用margin:auto，它的效果很好。我希望包含按钮的div从屏幕左侧开始是20px，但是在居中的h6标签的同一级别上;即我也希望它也垂直进入。我已使用position:absolute和margin:auto 0;上的以下内容，但它不起作用。该按钮显示在封闭div的左上角（运行我的代码段）。有什么想法吗？

left: 20px;
zoom: 0;
position: absolute;
margin:auto 0;

.container { align-items: center;
width: 100%;
max-width: 100%;
height: 400px}
.top { display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: 80%;
margin: 0 auto; background: #f6f6f6;}
.bottom { display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: 20%;
margin: 0 auto; background: green;}
h6 { margin: auto; }
.back-button-block { background: none;
display: block !important;
left: 20px;
zoom: 0;
position: absolute;
  margin:auto 0; 
}

<div class="container">
  <div class="top">Hello</div>
  <div class="bottom">
    <div class="back-button-block">THIS</div>
    <h6>hi</h6></div>
</div>

Answer 1

附加CSS（按照原样，只需将其添加到选择器中）：

.bottom {
    position: relative;
}
.back-button-block {
    top: 50%;
    transform: translateY(-50%);
}

将h tag和div在相同的封闭div中对齐在同一水平面

1 个答案: