a元素里面的图片与文字垂直和水平居中
来源:互联网 发布:unity3d webgl 编辑:程序博客网 时间:2024/05/17 08:16
废话不多说,直接上效果如下:
代码:
<meta charset="utf-8"><style type="text/css">*{ padding: 0; border:0; margin: 0;}ul li{ list-style-type: none;}a{text-decoration:none; }.inlineHalk{ font-size:0; -webkit-text-size-adjust:none;}.aling-top{ vertical-align:top;}#nav-box{ width: 1000px; height: 45px; background-color: #eee; margin: 0 auto;}.nav-list{ display: inline-block; width: 120px; height: 45px; font-size: 16px; margin-left: 10px;}.nav-list:first-child{ margin-left: 0px;}.nav-list a{ color: #000; display: block; width: 100%; height: 45px; line-height: 45px; background-color: #DBE8F5}.nav-list a:hover{ background-color: #93BCEA; color: #0F0;}.nav-list a img{ vertical-align: middle;}</style><ul id="nav-box" class="inlineHalk"> <li class = "nav-list aling-top"> <a href = "annocement.html"> <img src = "images/horn.png"> 公告 </a> </li> <li class = "nav-list aling-top"> <a href = "my.html"> <img src = "images/house.png"> 我的工作坊 </a> </li> <li class = "nav-list aling-top"> <a href = "javascript:;"> <img src = "images/exit.png"> 退出 </a> </li></ul>
备注
.inlineHalk是去除inline-block元素间间距,方式有很多,具体可以参考:http://blog.csdn.net/dq_pp/article/details/58300264
display:inline-block元素的父元素定义 font-size:0 ,可去掉元素水平4px的空白,子元素若要显示文字可重新定义font-size属性即可
display:inline-block元素本身定义 vertical-align 属性可去掉元素垂直方向的多余空白
1 0
- a元素里面的图片与文字垂直和水平居中
- DIV里面的图片水平与垂直居中的方法
- DIV里面的图片水平与垂直居中的方法
- 图片水平、垂直居中与父元素的css方法
- 图片和span水平垂直居中问题(主要解决小图标+文字水平垂直居中的问题)
- css将文字和图片水平垂直居中
- div内图片和文字水平垂直居中
- 利用css将文字和图片水平垂直居中显示
- div内图片和文字水平垂直居中
- 元素的水平垂直居中
- 图片水平与垂直居中
- 元素水平居中和垂直居中的方式
- 7种元素的水平居中和垂直居中方法
- 元素水平居中和垂直居中的方式总结
- CSS3 Flex实现元素的水平居中和垂直居中
- 图片和文字垂直居中的方法
- div下的图片水平居中和垂直居中
- 伪元素实现图片水平垂直居中
- getline()和get()
- Python 中的基本文件操作
- Linux环境下Weblogic部署应用的一些问题
- Servlet
- PCA原理
- a元素里面的图片与文字垂直和水平居中
- 几行代码绘制wordcloud词云
- 杭电--2187 悼念512汶川大地震遇难同胞——老人是真饿了(贪心)
- springMvc访问简介
- 链表bate1.0
- 【Unity3D UGUI】事件接口(一) 鼠标移入、移出
- HDU 5642 King's Order 动态规划
- 链表简单操作
- 海量数据查询优化