user1038814 user1038814 - 3 months ago 9
CSS Question

align h tag and div in the same enclosing div at the same horizontal level

I have an H6 tag and another div containing a button sharing the same row (div). I need the h6 tag to be entered, both vertically and horizontally, so I use

margin:auto
on it, and it works great. I want the div containing the button to be 20px from the left of the screen, but at the same level of the centered h6 tag; i.e I want it entered vertically too. Ive used the following on it with
position:absolute
and
margin:auto 0;
but it doesn't work. The button appears at the top left of the enclosing div (run my snippet). Any ideas?

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>




Seb Seb
Answer

Additional CSS (rest as it is, just add it to your selectors):

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