I am trying to center the text of a button in a todoList app and I keep messing up

Here is what I expect the text in my button to look like:

Here is what I get:

Notice how the text in the button is at the very bottom of my button?

Here is the link to my code.

You have set the height of your button to be 55px, so now you also need to set the line-height to be also 55px

1 Like

That work. Now I am trying to add text in which each time I add text, the text is added to a new line and the form box also extends each time text is added(since I want to add as many items as I can), but now everytime I click to add text to my form, it always starts on a new line .
Here is what I want:


Here is what I get

That did it . Now I have a question about another problem in this app which I asked below this comment

Currently You have this ↓↓↓ for adding new tasks:

const button=document.querySelector('button');
const input=document.querySelector('input');
const result=document.querySelector('.result');

    let text=document.createTextNode(input.value);


  1. In HTML you need to replace <div class="result"></div> with <ul class="result"></ul>
  2. In JS modify eventlistener on button click:
    let text = document.createElement('li');     // creating <li></li> element
    text.innerText = input.value;   // adding text value into <li>input.value</li>
    result.appendChild(text);       // inserting <li> into <ul class="result">
  1. Add some styling for .result:
.result {
    margin-top: 20px;
    margin-left: 35px;
    list-style: none;