html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行
2015-12-08 11:43
567 查看
在日常开发中,经常会使用到图片与文字或图片与按钮对齐。
1.图片与按钮 处于同一行,并居中对齐,长使用的方法如下:
使用属性 vertical-algin:middle 使元素的基线与父元素的基线对齐。
以下部分,借鉴于以下bolg: http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html
2.图片与文字处于同一行并居中对齐,也可以使用上面的这种方法,还有一种方法如下:
a. 大小不固定,单行文字的垂直居中
单行文字垂直居中,使用line-height,将line-height值与外部标签盒子的高度设置成一致即可。;
b.多行文字
当不确定文字有几行的情况下,如何实现垂直居中对齐勒? 其实最简单的方法是讲文字封装起来,把文字当做图片来处理,用<span>标签将所有文字封装起来。代码如下:
3. 大小不固定,图片垂直居中
a. 透明图片 + 背景定位
使用background-position:center 实现图片居中显示。 使用一个透明的gif图片做覆盖层,高宽拉伸至所需大小,然后设置背景图居中的属性,
html代码如下:
CSS 代码如下:
使用该方法的时候,一定要设置list-style 为none, 否则图片就不是垂直居中的。
b. display:table-cell 和文字大小控制居中
CSS 代码
1.图片与按钮 处于同一行,并居中对齐,长使用的方法如下:
<div> <img src="" style="vertical-align:middle"/> <button type="button">按钮</button> </div>
使用属性 vertical-algin:middle 使元素的基线与父元素的基线对齐。
以下部分,借鉴于以下bolg: http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html
2.图片与文字处于同一行并居中对齐,也可以使用上面的这种方法,还有一种方法如下:
a. 大小不固定,单行文字的垂直居中
单行文字垂直居中,使用line-height,将line-height值与外部标签盒子的高度设置成一致即可。;
b.多行文字
当不确定文字有几行的情况下,如何实现垂直居中对齐勒? 其实最简单的方法是讲文字封装起来,把文字当做图片来处理,用<span>标签将所有文字封装起来。代码如下:
<div style="display: table-cell; width:550px;height:1.14em; padding:0 0.1em;border: 4px solid #beceeb; color: #069; font-size: 10em;"> <span style="display:inline-block; font-size: 0.1em; vertical-align: middle;">单行文字居中测试单行文字居中测试单行文字居中测试单行文字居中测试单行文字居中测试 </span> </div>
3. 大小不固定,图片垂直居中
a. 透明图片 + 背景定位
使用background-position:center 实现图片居中显示。 使用一个透明的gif图片做覆盖层,高宽拉伸至所需大小,然后设置背景图居中的属性,
html代码如下:
<ul class="am-u-md-3"> <li> <img src="img/tm.png" style="background-image: url(img/fj.jpg);"/> </li> </ul>
CSS 代码如下:
.am-u-md-3 li{ width:400px; height:300px; padding:10px; margin: 0 10px; font-size: 100px; float: left; border:1px solid #beceeb; list-style:none; } .am-u-md-3 li img{ display: block; width:100%; height: 100%; background-repeat: no-repeat; background-position: center; }
使用该方法的时候,一定要设置list-style 为none, 否则图片就不是垂直居中的。
b. display:table-cell 和文字大小控制居中
<ul class="am-u-md-3"> <li> <div> <img src="img/fj.jpg"/> </div> </li>
CSS 代码
.am-u-md-3 li{ float: left; margin-right: 13px; list-style: none; } .am-u-md-3 li div{ display: table-cell; width:400px; height: 250px; border:1px solid #beceeb; font-size:118px; text-align: center; vertical-align: middle; } .am-u-md-3 li img{ vertical-align: middle; }
相关文章推荐
- HTML5调用传感器的资料汇总
- HTML5能为我们带来什么? 面试必备!
- html5 - 超链接基础和锚点
- HTML5定稿一周年,你必须要重新认识HTML5了
- HTML5定稿一周年,你必须要重新认识HTML5了
- h5学习笔记(1)
- HTML5浏览器嵌入窗口程序解决方案
- 离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程
- html5实现图片预览和查看原图
- H5网页判断手机横屏或是竖屏
- 今天大雪 看雪花飘落HTML5特效
- 8个3D视觉效果的HTML5动画欣赏
- HTML5地理地位加获取设备信息
- HTML5做手机站页面字体显示很小的解决方法
- HTML5规范的本地存储
- Maqetta Preview 2 发布,开源HTML5可视化设计工具
- HTML5桌面通知:notification api
- HTML5 Canvas入门
- html5 - 基础格式认识和标签用法(文本元素常用方法)
- HTML5基础--开发工具