html - How to center two buttons next to each other but center of the screen? -
this such basic question i'm trying in ionic. i've been trying
margin: 0 auto; text-align: center; position: relative;
so many things it's not working, help?
update: i've tried 1 of solutions , css, still doesn't work, center, way @ top
.square{ width: 25vw; height: 8vw; } .container { display: flex; justify-content: center; align-items: center; height: 100%; }
html:
<div class="container" <div class="button-wrapper"> <button class="button button-outline square button-calm"> male </button> <button class="button button-outline square button-royal"> female </button> </div> </div>
you can use flexbox achieve this. firstly wrap buttons within container:
<div class="container"> <div class="button-wrapper"> <button class="male">male</button> <button class="female">female</button> </div> </div>
then, in css, apply vertical , horizontal centring children of container:
.container { display: flex; justify-content: center; align-items: center; height: 100%; }
Comments
Post a Comment