我不明白。这是一个非常简单的文档,我看不出它应该工作的任何原因。
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的,因此我不确定它为什么不起作用。
答案 0 :(得分:2)
将以下代码添加到button
css。请参阅http://jsbin.com/kixewufe/2/以查看http://jsbin.com/kixewufe/2/edit?html,css,output以查看完整代码。
vertical-align:middle;
display:inherit;
答案 1 :(得分:0)
<td>
内容确实是垂直对齐的。问题是内容是消耗所有可用高度的<a>
标记,其内容(<p>
段落)不是垂直对齐的。
尝试对齐<a>
标记:
.button {
display: table-cell;
vertical-align: middle;
}
答案 2 :(得分:0)
请尝试使用此代码。它在文本上放置了按钮类(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;
}
答案 3 :(得分:0)
因为这些解决方案都不适合我,所以我在 StackOverflow 上找到了以下解决方案。据我所知,这也适用于 Bootstrap 4。
td {
display: flex;
align-items: center;
}