【html】 a标签内的文字垂直居中对齐问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了【html】 a标签内的文字垂直居中对齐问题相关的知识,希望对你有一定的参考价值。

样式:a:link,a:visited
text-decoration:none;
color: black;
font-size:13px;


Atext-decoration:none;
color:#0033FF;
font-family:Arial, Helvetica, sans-serif;


代码
<!-- 用户管理 -->
<tr>
<td><img src="../../images/vertline.gif" width="16" height="22" /></td>
<td><img src="../../images/node.gif" width="16" height="22" /></td>
<td width="124" height="22"><img src="../../images/doc2.gif" width="16" height="22" valign="middle"/><a href="cUserCfg.html" target="basefrm">  用户管理</a></td>
</tr>

效果看图,
问:图片已经设置垂直居中对齐,但发现链接的文字还是底部对齐了,怎样把a标签内的文字与左图垂直居中对齐?

<tr>
<td><img src="../../images/vertline.gif" width="16" height="22" /></td>
<td><img src="../../images/node.gif" width="16" height="22" /></td>
<td width="124" height="22"><span style="width: 20px; height: 15px; float: left"><img src="../../images/doc2.gif" width="16" height="22" valign="middle"/></span><span style="width:85px;height:15px;float:left;font-size:12px;padding-top:2px"><a href="cUserCfg.html" target="basefrm"> 用户管理</a></span></td>
</tr>
参考技术A 1 建议把图片做为背景
2 把图片外加个标签套起来

如何设置一个div中的文字水平垂直居中

由于div 是块级元素,在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。 设置文字的padding,使其达到居中的效果。、 在文字外层,div内包裹一个标签,只是一段文字并将p标签的大小设置的与div标签同样大校再对p标 参考技术A 有两种方式:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.dcenter border:1px solid #ddd;
.dcenter p text-align:center;width:100%;
.d-center display:table-cell;text-align:center;vertical-align:middle;border:1px solid #ddd;width:100%;height:100px;
</style>
</head>
<body>
<!--第一种-->
<div class="dcenter">
<p>12412433241243324124332412433243324</p>
</div>
<!--第二种-->
<div class="d-center">12412433241243324124332412433243324</div>
</body>
</html>
还可以通过line-height来设置

以上是关于【html】 a标签内的文字垂直居中对齐问题的主要内容,如果未能解决你的问题,请参考以下文章

li标签的文字与图片居中对齐

如何使用css设置文字在网页中显示居中?

如何设置一个div中的文字水平垂直居中

html中啥标签可以让标签内的文字自动换行

word文档里面的文字垂直方向上如何居中?

css中让文字和图片对齐的问题