Aligning items and button

HTML-CSS
1

I’m currently doing the random quote machine project and I’m doing pretty decently in my opinion, but there are two problems:

  1. why does the “align-items” doesn’t align my quote box element in the vertical center of the page?
  2. how can i make my buttons (currently button but will be buttons) locked in the quote box so they will stay steady in one line? should i make a seperate div for them?
    thanks in advance :slightly_smiling_face: :dizzy:
    link to the project: https://codepen.io/harel_avv/pen/xxEgNJL
2

  1. You need to give the body a height (height: 100vh).

  2. Not sure I understand the question.

1 Like
3

1.) It does, it is just that your page is the same height as your quote box, so it can’t put the box where you want it to go, unless you make the page height 100% of the view height.
If you
2.) You can make the quote box relative, and the buttons absolute and send the buttons to the bottom. Using absolute positioning isn’t best practice though because it is not very responsive. So I would avoid it if possible, you could wrap the quotes in a new div and the button in a new div and make the new quote div height as large as you want and then use the new button div and fill in the rest of the height so it fills up the entirety of the quote box, and that way it wont move every time a new quote is generated.

4

you have used span which is an inline element. you can make the button positioned relative to the box and set it in the lower part f the box.