zoukankan      html  css  js  c++  java
  • li 标签中放a 标签,文字垂直居中

     <ul style="float:left"><li  class="lili">
                    <a href="Left.aspx?type=214" target="leftFrame" class="imageA"><span style="Letter-spacing :1px;  position:relative; color:#900;">对标系统</span></a>
                   </li>
                   <li  class="lili">
                    <a href="Left.aspx?type=225" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">绩效考核</span></a>
                   </li>
                   <li  class="lili">
                    <a href="Left.aspx?type=235" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">内部数据</span></a>
                   </li>
                   <li  class="lili">
                    <a href="Left.aspx?type=239" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">外部数据</span></a>
                   </li>
                   <li  class="lili">
                    <a href="Left.aspx?type=59" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">系统管理</span></a>
                   </li>
                   </ul> 
    

      上面这段代码中,想让a标签中的文字居中,需要设置li标签的line-height 和height属性;

    <style type="text/css">
    .imageA
    {
    	background-image:url(../App_Themes/DefaultTheme/images/top_nav.jpg);
    	background-repeat:no-repeat;
    	display:block;
    	110px;
    	height:29px;
    	 text-align:center;
    	 font-size:14px;
    	  color:#900;
    	 font-weight:bold; 
    	  
    	}
    	.lili
    	{
    		display:block;
    	110px;
    	height:29px;
    	line-height:31px;
    	float:left
    		}
    </style>
    

      有时候li 标签 水平显示(style=“float:left”),它的外面一层 的高度可能比它高一些。为了让它里面的a标签的文字居中,就需要把它的行高设置成和它外层的行高一样高就可以了!

    Top
    收藏
    关注
    评论
  • 相关阅读:
    yii2.0 邮件发送如何配置
    php(ThinkPHP)实现微信小程序的登录过程
    微信小程序开发
    一个中高级PHP工程师所应该具备的能力
    如何解决PHP的高并发和大流量的问题
    对于PHP面试知识点的小结
    Centos7 redis设置开机自启动
    CENTOS7下REDIS设置密码、开放远程访问权限
    CentOS7安装Redis
    SQL Server 2012允许远程连接(Windows Server 2016)
  • 原文地址:https://www.cnblogs.com/alanjl/p/3423858.html
Copyright © 2011-2022 走看看