HTML+；CSS使用<；格式化按钮；a>；及<；h>；

我最近开始学习HTML和CSS，我遇到了这个问题：

带有“Spausk mane”的3个按钮的文本应位于框的底部，或者离底部10像素，但居中。由于某种原因，线条高度、边距等不起作用。此外，悬停设置对它们不起作用，因为我想我在“h3”和“a”标记格式方面出了问题，帮助？：

HTML:

---

以这种方式设置单行文本按钮的样式，使其变胖并居中（垂直）：

如果您计划在按钮中使用包装文本，则可以使用：

padding: 3em 0;

---

我对你的CSS做了一点修改。使用

display:table

和

table cell

可以将文本居中

查看了解更多信息

.cta-wrap{display:table;}

a.cta {
color:white;
text-decoration: none;
text-align: center;
float:left;
margin: 0px 20px 10px 20px;
display:block;
}
a.cta h3 {
background-color:#287D7D;
width: 150px;
height: 110px;
display:table-cell;
vertical-align:middle;
}

a.cta h3:hover {background:red;}

---

谢谢，修正了悬停，文本位置如何？线条高度和边距没有任何作用：/抱歉，我不明白，如果我使用线条高度，它只会将两行“Spausk”和“mane”彼此分开是的。然后使用第二个选项。再读一遍我的回答。谢谢，现在有没有办法把课文往上移一点？因为如果我使用垂直对齐：底部；它完全粘在底部。此外，出于某种原因，您的代码会在按钮下方的“我的表格”中插入空格：如果要移动文本，请使用填充。如果使用填充，请减少宽度。

.cta-wrap a:hover h3,
.cta-wrap a h3:hover{
     color:red;
     background-color:yellow;
 }

height: 110px;
line-height: 110px;

padding: 3em 0;

.cta-wrap{display:table;}

a.cta {
color:white;
text-decoration: none;
text-align: center;
float:left;
margin: 0px 20px 10px 20px;
display:block;
}
a.cta h3 {
background-color:#287D7D;
width: 150px;
height: 110px;
display:table-cell;
vertical-align:middle;
}

a.cta h3:hover {background:red;}