CODEWITHSUNDEEP
htmlcss
Zack Lee
Zack Lee

Reputation: 3044

How to vertically align and evenly distribute two buttons?

I'm trying to align the two buttons to be horizontally centered, and evenly distributed vertically on the browser window like the following photo:

enter image description here

#buttonArea {
  display: flex;
  flex-direction: column;
}

#addButton {
  margin: auto;
  display: block;
}

#eraseButton {
  margin: auto;
  display: block;
}
<div id="buttonArea">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
</div>

The buttons are horizontally centered, but I don't know how to vertically align them so they are evenly distributed. (e.g. ADD: 33.33%, ERASE: 66.66%)

How can I align the buttons like my photo?

Upvotes: 1

Views: 1779

Answers (4)

khan
khan

Reputation: 1464

Use justify-content: space-around to distribute equal vertical space around each button and align-items: center to horizontally align the elements.

Just a side note, justify-content applies to the main axis and align-items applies to cross axis. Normally, justify-content applies to the x-axis since the default value for flex-direction is row. However, since we used flex-direction: column, the main axis is now the y-axis.

#buttonArea {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  
  width: 100%;
  height: 100vh;
  border: 1px solid black;
}
<div id="buttonArea">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
</div>

Upvotes: 1

Pritam Mullick
Pritam Mullick

Reputation: 226

You need to add position:relative to the parent div and then for the buttons add position: absolute; and use the top: xx %; property to align it vertically at 33% and 66% of the height.

#buttonArea {
  display: flex;
  justify-content: center;
  align-items: center;
  height: -webkit-fill-available;
  width: 100%
  position:relative;
  text-align:centre;
}

#addButton {
  display: block;
  top: 33.33%;
  position:absolute;
}

#eraseButton {
  top: 66.66%;
  position:absolute;
  display: block;
}
<div id="buttonArea">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
</div>

Hope this helps. Cheers!

Upvotes: 1

Mohinish Teja
Mohinish Teja

Reputation: 55

Use position:relative and manage the coordinates accordingly

Upvotes: -1

Khant Min Si Thu
Khant Min Si Thu

Reputation: 328

HTML

<div id="Area">
  <div class="container">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
  </div>
</div>

CSS

#Area {
  width: 100vw;
  height: 100vh;
}

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

addButton, eraseButton{
    width: 50px;
    display: inline-block,
}

What I am doing is You need to set the width the height of the page so that you can set the items in place you want. Then will set the container of button to height: 100% because u want to align horizontally centered, and evenly distributed vertically.

Next most important thing is justify-content: space-around; Since you are using flex I hope you know this

Upvotes: 1

Related Questions