how to push the photo and the button to the bottom and make the button take up all the space by css?

Question

I am newbie with html css and here is my problem.

I am trying to cover a website, and here is the screenshot of the design of the website I want to cover

Design of the notification button

But here is my notification button

My notification button

As you can see in my notification button's picture, I have some problems.

My first problem is, the picture is not lying in the middle. My second problem is, the buttons below are too close to the picture and the message line ?

And my third problem is, the size of the buttons below the picture does not match as the design ?

https://github.com/anhquanjp/bai110headernotificationcss

To solve the first and the second problem, should I make a frames with a width and height as the design and then push the picture and message line down ? So that the buttons will be pushed down too ?

Could you please give me some advices ? Thank you very much for your time.

Answer 1

For 1st problem make a new div and move your img inside this div then

.thisdiv{

display:flex;
align-items:center;
justify-content:center;
}

For 2nd problem give margin to top i.e margin: top/bottom left/right; or simply margin-left,right, top, bottom etc.

button{
margin-top:4vh;
}

For 3rd problem, change padding of the button as required