我想要一列文本垂直居中的按钮，按钮上有 block 选择，以便在任何地方单击按钮，它都会导航到链接。
垂直文本对齐不起作用， block 选择也不起作用。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<style type="text/css">
ul{
width:110px;
display:block;
}
li{
background-image: url(../images/bg_th.gif);
font: bold 10px Arial, Helvetica;
height:55px;
color: #999;
text-align:center;
vertical-align: middle;
width:110px;
display:block;
}
</style>
<body>
<ul>
<li><a href="fooPage.html" target="innerPane">Button 1</a></li>
<li><a href="fooPage.html" target="innerPane">Button 2</a></li>
<li><a href="fooPage.html" target="innerPane">Button 3</a></li>
</ul>
<iframe name="innerPane"src="foo.html"></iframe>
</body>
</html>
请协助。
最佳答案
根据您的问题，需要完成以下两件事。
- 垂直对齐每个按钮的文本。
- 不仅按钮上的文字而且按钮的整个区域都应该是可点击的。
首先可以通过应用 {position:relative; 来解决；显示:表格单元格； vertical-align:middle} 到包含文本的元素。此外，您需要应用 {display:table; vertical-align:middle;} 到父元素。
其次， anchor 标记应该应用到任何你想要点击区域的地方。您可以交换 HTML 中的 a 和 li 元素。
参见 demo .
如果您的意思与问题不同，请发表评论。
关于html - 垂直文本对齐中心和 block 选择在 li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22820920/