Блог

Я пытаюсь создать веб-страницу, которая содержит три круглые кнопки с некоторым текстом на них. Но проблема в том, что я не смог расположить текст так, чтобы он находился в центре кнопок. Текст центрирован по горизонтали. Но он не центрирован по вертикали. Это скриншот вывода: Скриншот

Ниже приведен используемый css:

 button{
width: 10%;
height: 0;
margin-left: auto;
margin-right: auto;
padding-bottom: 10%;
border-radius: 50%;
border: 2px solid #f5f5f5;
box-shadow: 0 0 3px gray;
vertical-align: middle;
text-align: center;
}
button:hover{
    background-color: #E9D66B;
}
  

Вы можете добиться этого простым HTML-кодом CSS:

 button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #f5f5f5;
  box-shadow: 0 0 3px gray;
}  

 <button>Hello</button>
<button>Testing</button>
<button>Check</button>