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;
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 标签,文字垂直居中的更多相关文章
- jstl标准标签库 常用标签
JSTL(JSP Standard Tag Library)标准标签库: 1, 核心标签(最常用, 最重要的) 表达式控制标签 out 输出常量 value---直接赋值 输出变量 default-- ...
- 文字垂直居中,水平居中 a标签水平居中只要给他的父级设置text-align=center
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签
指引 网页中的信息主要是以文本为主的,可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记 ...
- meta标签、常用的文字类标签及其区别
常用的文字类基本标签 段落:p标题文字 :h1~h6超链接:a,必须属性href,后跟跳转地址图片:img,必须属性src,后跟图片地址字体斜体:em.i 文字加粗:b.strong文字下划线:u文字 ...
- div+css(ul li)实现图片上文字下列表布局
css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...
- css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
- 03-body标签中相关标签
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
随机推荐
- 122.Best Time to Buy and Sell Stock II---dp
题目链接:https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/description/ 题目大意:基本定义与121类似,不 ...
- jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $("ul").append("<li cla ...
- MySQL启动很慢的原因
我们在启动MySQL的时候,常常会遇到的是, 当执行启动命令后,它会"Start MySQL ....." 一直不停的执行,也不中断,也不成功 这里会出现此现象的原因有以下三条: ...
- 动手编写TCP服务器系列之一:日志文件
前言 在几个月之前,笔者想自己实现一个性能比较良好的基于tcp的服务器.于是断断续续写了个把月,因为还需要找工,还有论文什么的.拖了这么久.现在开辟这样的一个博客,我想记录下自己的思路,也和大家分享自 ...
- HDU 4507 吉哥系列故事――恨7不成妻(数位DP+结构体)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4507 题目大意:如果一个整数符合下面3个条件之一,那么我们就说这个整数和7有关 1.整数中某一位是7: ...
- 推荐一个数据相关的网站tushare
推荐一个网站:tushare 使用方法如下: pip install tushare 我是使用pycharm直接安装的 抓取了浦发和光大的股票数据,并通过csv进行保存,和通过plt进行图片打印 im ...
- ASPLOS'17论文导读——SC-DCNN: Highly-Scalable Deep Convolutional Neural Network using Stochastic Computing
今年去参加了ASPLOS 2017大会,这个会议总体来说我感觉偏系统和偏软一点,涉及硬件的相对少一些,对我这个喜欢算法以及硬件架构的菜鸟来说并不算非常契合.中间记录了几篇相对比较有趣的paper,今天 ...
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
- 【Sql Server】Sql语句整理
use Person <--添加约束--> Alter table Student alter column Sno ) not null; Alter table Student Add ...
- springMVC+freemarker实现自定义标签
在开发过程中,有些需要引用到重复的页面,或者动态的数据 修改数据库是可以实现,但是太麻烦了. freemarker自定义标签在开发中用途很广,就说个入门实例吧 基于springmvc. 首先需要导入对 ...