gpt4 book ai didi

html - 垂直文本对齐中心和 block 选择在 li

转载 作者:太空宇宙 更新时间:2023-11-04 03:55:54 29 4
gpt4 key购买 nike

我想要一列文本垂直居中的按钮,按钮上有 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>

请协助。

最佳答案

根据您的问题,需要完成以下两件事。

  1. 垂直对齐每个按钮的文本。
  2. 不仅按钮上的文字而且按钮的整个区域都应该是可点击的。

首先可以通过应用 {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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com