文档章节

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

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

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

   

   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
最佳的 HTML5 和 CSS3 教程 - June 2011

Apple.com 导航菜单(只使用CSS3) 该教程将为你展示如何使用 CSS3 创建苹果风格的菜单。 使用 CSS3 的 RGBa 属性处理透明效果 一个简短的教程介绍 CSS3 的透明效果处理 Getting started with...

红薯
2011/06/17
6.8K
15
精挑细选 8款HTML5/jQuery应用助网站走向高上大

在WEB3.0的时代,我们的网站不仅要实现实用价值,更要为用户设计优秀的用户体验。jQuery是一个不错的JS框架,结合目前最新的HTML5技术,我们可以将自己的网站脱胎换骨,立马走向高上大,至少...

yykj
2014/04/03
954
1
9款超绚丽的HTML5/CSS3应用和动画特效

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

切切歆语
2017/10/23
0
0
12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用...

fishzhang8
2017/09/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

GROUP BY GROUPING SETS

GROUPING SETS 子句是 SELECT 语句的 GROUP BY 子句的扩展。通过 GROUPING SETS 子句,您可采用多种方式对结果分组,而不必使用多个 SELECT 语句来实现这一目的。这就意味着,能够减少响应时...

hblt-j
10分钟前
0
0
selenium之表格的定位

真的勇士, 敢于直面惨淡的warning、 敢于正视淋漓的error 目录 被测试网页的HTML代码 1.遍历表格所有单元格 2.定位表格中的某个元素 3.定位表格中的子元素 总结 浏览器网页常常会包含各类表...

程序猿拿Q
15分钟前
0
0
adb命令启动展讯平台工厂模式

adb命令启动展讯工厂模式: adb shell am start com.sprd.engineermode/com.sprd.engineermode.EngineerModeActivity...

东街小霸王
15分钟前
0
0
mtu值怎样设置才网速最快

一、什么是 MTU 值 1 从字面上来说,MTU 是英文 Maximum Transmission Unit 的缩写,即最大传输单元,它的单位是字节。 在我们常用的以太网中,MTU 一般是 1500,而无线路由器默认一般是 14...

Clarence_D
34分钟前
1
0
McAfee阻止邮件发送功能

自己写的邮件发送功能,在本地机器上可以发送,但是放到服务器上面之后就不能发送了,捕获到的异常是“以一个访问权限不允许的方式做了一个访问套接字的尝试”,找了很久,终于发现是被McAfe...

壹峰
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部