0

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>
user1038814
  • 9,337
  • 18
  • 65
  • 86
  • Possible duplicate of [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) – Aziz Aug 26 '16 at 13:18

1 Answers1

2

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

.bottom {
    position: relative;
}
.back-button-block {
    top: 50%;
    transform: translateY(-50%);
}
The Witness
  • 910
  • 7
  • 12