文档章节

html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行

突然很想飞
 突然很想飞
发布于 2015/12/08 11:43
字数 575
阅读 3728
收藏 3

    在日常开发中,经常会使用到图片与文字或图片与按钮对齐。

   

   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;
}



© 著作权归作者所有

共有 人打赏支持
突然很想飞
粉丝 0
博文 4
码字总数 1595
作品 0
南京
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
0
0
使用canvas在前端实现图片合成

看着总结的不错,我也就拿来主义了,做个记录,侵权必删 图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。 随着HTML5发展和现代浏览器的占比越来越高,...

xllily_11
02/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

获取多个集合列表的笛卡尔积

获取多个集合笛卡尔积 电商中典型业务场景:商品搜索 单属性属性值之间为并查询 不同属性的属性值之间查询为与查询 import java.util.ArrayList;import java.util.List;/** * Created w...

键走偏锋
22分钟前
0
0
echarts 迁移地图 控制鼠标缩放大小比例

在网上找了好久没有找到解决方式,还是重新看了一下文档,终于找到的解决方案, zoom:1, //默认显示级别 scaleLimit:{min:1,max:3}, // 缩放级别 echarts 文档-配置项链接 http://echarts.b...

心驰
26分钟前
0
0
Boot2Docker ISO is out-of-date,

Boot2Docker ISO is out-of-date, downloading the latest release. 使用docker-machine时无法更新Boot2Docker ISO导致创建vm machine失败 解决方法:关闭网络,创建好之后再开启...

writeademo
34分钟前
0
0
在 Tomcat 中设置 Tapestry 框架的 html 热加载

如果开发中使用到了 Tapestry 这个框架,如果事先没有设置过的话,开发的时候 html 是不会热加载的,也就是说修改了 html 文件,不能刷新浏览器后立马看到修改完的效果,必须先重新启动应用服...

LeoXu
56分钟前
0
0
【微服务】开启巨石应用到微服务的探索

背景 在过去的一年时间里,我一直在从事一件事情,将现有的单体应用(巨石应用)向微服务改造。 接下来,将持续整理一些在微服务路上的学习与成长。 为什么要做微服务 单体应用,开发、部署简...

艳沐石
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部