1

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

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

带有“Spausk mane”的 3 个按钮的文本应该位于框的底部，或者距离底部 10 像素但居中。行高、边距等由于某种原因不起作用。悬停设置也对他们不起作用，因为我认为我在“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;
        }
4

3 回答 3

0 
.cta-wrap a:hover h3,
.cta-wrap a h3:hover{
     color:red;
     background-color:yellow;
 }
于 2014-05-31T09:40:19.180 回答
0

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

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

如果您打算在按钮中包含文本，您可以使用：

padding: 3em 0;
于 2014-05-31T09:44:36.187 回答
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;}
于 2014-05-31T09:52:26.670 回答