CODEWITHSUNDEEP
htmlcssionic-framework
Huang Chen
Huang Chen

Reputation: 1205

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

enter image description here

This is definitely such a basic question but I'm trying to do this in Ionic. I've been trying

margin: 0 auto;
text-align: center;
position: relative;

so many things but it's not working, help?

UPDATE: So I've tried one of the solutions and this is my CSS, but it still doesn't work, its center, but all the way at the 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>

Upvotes: 0

Views: 7774

Answers (3)

Huang Chen
Huang Chen

Reputation: 1205

I've decided to do 

.square{
    width: 25vw;
    height: 10vw;
}

.container {
    padding-top: 35vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

not sure how good of a convention this is, but it seemed to center it decently on different devices

Upvotes: -2

alanbuchanan
alanbuchanan

Reputation: 4173

You can use flexbox to achieve this. Firstly wrap the buttons within a container:

<div class="container">
  <div class="button-wrapper">
    <button class="male">Male</button>
    <button class="female">Female</button>
  </div>
</div>

Then, in the CSS, apply vertical and horizontal centring to the children of the container:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

Codepen example

Upvotes: 5

Arjun
Arjun

Reputation: 236

I have no experience with iconic framework. But I think following suggestions might work, give it a try: 1) You can try <center> tag 2) or you can try left:50%; (which is setting the left margin)

Upvotes: 0

Related Questions