HTML + CSS使用<a>和</a>格式化按钮<h>

Question

我最近开始学习HTML和CSS，但遇到了以下问题：

http://i.stack.imgur.com/nPKL9.png

带有“ Spausk鬃毛”的3个按钮的文本应位于框的底部，或距底部大约10px，但应居中。 行高，边距等由于某些原因无法正常工作。 悬停设置也不适用于他们，因为我认为在使用“ h3”和“ a”标签格式时出现了问题，对吗？ ：S

HTML：

     <div class="cta-wrap cf"> 
          <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
          <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
          <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
     </div>

CSS：

a.cta {
          color:white;
          text-decoration: none;
          text-align: center;
       }
a:hover.cta {}

.cta h3 {
            background-color:#287D7D;
            width: 150px;
            height: 110px;
            float:left;
            margin: 0px 20px 10px 20px;
        }

Answer 1

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

Answer 2

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

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

如果您计划在按钮中包含换行符，则可以使用：

padding: 3em 0;

Answer 3

我修改了您的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;}