html – 在内嵌块中垂直居中的文本
发布时间:2020-12-14 21:27:22 所属栏目:资源 来源:网络整理
导读:我正在尝试使用风格的超链接为网站创建一些按钮。我已经设法让按钮看起来像我想要的,禁止一个轻微的问题。我无法将文本(下面的源代码中的“链接”)垂直居中。 不幸的是,第二个按钮可能会显示多行文字,所以我不能使用行高来垂直居中。 我的初始解决方案是
我正在尝试使用风格的超链接为网站创建一些按钮。我已经设法让按钮看起来像我想要的,禁止一个轻微的问题。我无法将文本(下面的源代码中的“链接”)垂直居中。
不幸的是,第二个按钮可能会显示多行文字,所以我不能使用行高来垂直居中。 我的初始解决方案是使用display:table-cell;而不是内联阻止,并且在Chrome,Firefox和Safari中排除问题,但不是在Internet Explorer中,所以我想我需要坚持内联阻止。 我将如何在57px x 100px的内嵌块中垂直居中链接文本,并适应多行文字?提前致谢。 CSS: .button { background-image:url(/images/categorybutton-off.gif); color:#000; display:inline-block; height:57px; width:100px; font-family:Verdana,Geneva,sans-serif; font-size:10px; font-weight:bold; text-align:center; text-decoration:none; vertical-align:middle; } .button:hover { background-image:url(/images/categorybutton-on.gif); } .button:before { content:"Click Here ForA"; font-style:italic; font-weight:normal !important; white-space:pre; } HTML: <a href="/" class="button">Link</a> <a href="/" class="button">Link<br />More Details</a> 解决方法
用一个跨度(居中)包装文本,并在此之前写入另一个空的范围(Centerer)。
HTML: <a href="..." class="button"> <span class="Centerer"></span> <span class='Centered'>Link</span> </a> CSS .Centered { vertical-align: middle; display: inline-block; } .Centerer { display: inline-block; height: 100%; vertical-align: middle; } 看看这里:http://jsfiddle.net/xVnQ6/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |