Question

如何处理表单提交按钮中的文本，内部文本在底部对齐，我如何居中？

我尝试了很多功能，例如对齐，垂直对齐，边距。

form .submit{
     background: white;
     border-color: transparent;
     color:black;
     font-size: 4vw;
     width: 60px;
     height: 25px;
     bottom: -15vh;
     left: 40vw;
     vertical-align: -5px;
     font-family: 'athela', Calibri, Arial, sans-serif;
     border: none;
     border-radius: 0px 0px 1px 1px;
     text-align: center;
     -webkit-appearance: none;
     -webkit-border-radius: 0px 0px 5px 5px;
}

the sende button

Answer 1

要使文本居中，可以将“提交”按钮设置为弹性框。

button {
  width: 100px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<button>send</button>

Answer 2

使用行高来解决您的问题

body{
  background: #666;
}

button {
  background: white;
     border-color: transparent;
     color:black;
     font-size: 4vw;
     width: 60px;
     height: 25px;
     padding: 0;
     line-height: 24px;
     font-family: 'athela', Calibri, Arial, sans-serif;
     border: none;
     border-radius: 0px 0px 1px 1px;
     text-align: center;
     -webkit-appearance: none;
     -webkit-border-radius: 0px 0px 5px 5px;
}

<button>Test</button>

如何在表单提交按钮中处理文本？

2 个答案: