html - How to center two buttons next to each other but center of the screen? -


enter image description here

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%; } 

codepen example


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -