<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;
width:110px;
height:29px;
text-align:center;
font-size:14px;
color:#900;
font-weight:bold; }
.lili
{
display:block;
width:110px;
height:29px;
line-height:31px;
float:left
}
</style>

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

li 标签中放a 标签,文字垂直居中的更多相关文章

  1. jstl标准标签库 常用标签

    JSTL(JSP Standard Tag Library)标准标签库: 1, 核心标签(最常用, 最重要的) 表达式控制标签 out 输出常量 value---直接赋值 输出变量 default-- ...

  2. 文字垂直居中,水平居中 a标签水平居中只要给他的父级设置text-align=center

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  4. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签

    指引 网页中的信息主要是以文本为主的,可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记 ...

  5. meta标签、常用的文字类标签及其区别

    常用的文字类基本标签 段落:p标题文字 :h1~h6超链接:a,必须属性href,后跟跳转地址图片:img,必须属性src,后跟图片地址字体斜体:em.i 文字加粗:b.strong文字下划线:u文字 ...

  6. div+css(ul li)实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  7. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  8. 03-body标签中相关标签

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...

  9. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

  1. Linux 用户态与内核态的交互【转载】

    Linux 用户态与内核态的交互  在 Linux 2.4 版以后版本的内核中,几乎全部的中断过程与用户态进程的通信都是使用 netlink 套接字实现的,例如iprote2网络管理工具,它与内核的交 ...

  2. 14个最常见的Kafka面试题及答案【转】

    原创 IT168企业级 2017-08-21 17:40 本文为您盘点了14个最常见的Kafka面试题,同时也是对Apache Kafka初学者必备知识点的一个整理与介绍. 1.请说明什么是Apach ...

  3. 011 CountDownLatch,CyclicBarrier和Semaphore

    CountDownLatch(闭锁,有译倒计数,锁寄存): public class CountDownLatchTest { /*** 比如有一个任务A,它要等待其他4个任务执行完毕之后才能执行,此 ...

  4. openjudge-NOI 2.6-1759 最长上升子序列

    题目链接:http://noi.openjudge.cn/ch0206/1759/ 题解: 奇怪……之前博客里的o(nlogn)标程在codevs和tyvj上都能AC,偏偏它这里不行 #include ...

  5. css的背景图片background

    1.使用背景图片的标签定设置宽高,没有设置的话,也需要用内容来撑开标签. 2.如果对同一个标签分开设置背景图片和颜色,背景颜色一定要写在背景图片后面,不然会被覆盖 <!DOCTYPE html& ...

  6. 《跟老齐学Python Django实战》读后感

    1.说一下这本书,讲解的很细致,内容选取足够入门Django. 2.在学习这本书要注意的几点: <1>如果你想跟着敲这本书的代码必须要安装:Django版本1.10.1(当然也可以玩玩新版 ...

  7. 系统日志查看logrotate 工具

    logrotate是作为linux系统日志的管理工具存在.他可以轮换,压缩,邮件系统日志文件. 默认的logrotate被加入cron的/etc/cron.daily中作为每日任务执行./etc/lo ...

  8. apache 软件历史版本查询

    http://archive.apache.org/dist/ http://archive.apache.org/dist/struts/binaries/

  9. 字节对齐&&sizeof

    转:http://blog.chinaunix.net/uid-722885-id-124878.html 1. sizeof应用在结构上的情况 请看下面的结构: struct MyStruct { ...

  10. 【PAT】1004. 成绩排名 (20)

    1004. 成绩排名 (20) 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生的姓名 ...