我不明白。这是一个非常简单的文档,我看不出它有任何不起作用的理由。
CSS:
.button {
background-color: transparent;
border-radius: 50%;
border: 5px solid #ff0099;
display: table-cell;
vertical-align: middle;
height: 175px;
width: 175px;
text-decoration:none;
text-align: center;
word-wrap: break-word;
}
.button:hover {
text-decoration: underline;
}
.button p {
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
}
table {
border-spacing: 20px 10px;
border-collapse: separate;
}
td {
vertical-align:middle;
}
HTML:
<table>
<tr>
<td>
<a href="#" class="button" target="_blank"><p>Insert text here, enough to push it over the edge</p></a>
</td>
<td>
<a href="#" class="button" target="_blank"><p>Insert text here, enough to push it over the edge</p></a>
</td>
</tr>
</table>
据我所知,vertical-align是用于td的,所以我不确定为什么它不起作用。
将以下代码添加到
button
css 。参考 http://jsbin.com/kixewufe/2/ 查看 http://jsbin.com/kixewufe/2/edit?html,css,output 查看完整代码。
vertical-align:middle;
display:inherit;
<td>
内容确实是垂直对齐的。问题在于,内容是 <a>
标签,它消耗了所有可用高度,并且它自己的内容(即 <p>
段落)没有垂直对齐。
也尝试对齐
<a>
标签:
.button {
display: table-cell;
vertical-align: middle;
}
尝试使用此代码。它将按钮类放置在文本上(
vertical-align:middle;
)并使用绝对定位将按钮类定位在表格单元格上。
我很抱歉,我现在无法添加 jsfiddle,因为他们遇到了一些问题,但是,如果您复制 - 粘贴下面的代码,您将看到您得到(我相信是)您想要的结果。
HTML
<table>
<tr>
<td> <a href="#" class="button" target="_blank"></a>
<p>Insert text here, enough to push it over the edge</p>
</td>
<td> <a href="#" class="button" target="_blank"></a>
<p>Insert text here, enough to push it over the edge</p>
</td>
</tr>
</table>
CSS
.button {
background-color: transparent;
border-radius: 50%;
border: 5px solid #ff0099;
height: 175px;
width: 175px;
position:absolute;
top:0px;
left:0px;
}
td p {
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
text-align:center;
text-decoration:none;
width:170px;
margin-left:6px;
}
table {
border-spacing: 20px 10px;
border-collapse: separate;
}
td {
position:relative;
width:180px;
height:180px;
vertical-align:middle;
}
因为这些解决方案都不适合我,所以我在 StackOverflow 上找到了以下解决方案。据我所知,这也可以完美地与 Bootstrap 4 配合使用。
td {
display: flex;
align-items: center;
}
太棒了,这正是我一直在寻找的!
非常感谢大家