文档章节

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

突然很想飞
 突然很想飞
发布于 2015/12/08 11:43
字数 575
阅读 3383
收藏 3
点赞 0
评论 0

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

   

   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
南京
超级绚丽,20款前端动画特效,轰炸你的眼睛

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

浪漫程序员 ⋅ 04/25 ⋅ 0

使用canvas在前端实现图片合成

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

xllily_11 ⋅ 02/26 ⋅ 0

jQuery文件上传插件Uploadify(转)

一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列。 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用。 由于官方提供的版本是flash免费,html5版本...

easonjim ⋅ 2017/01/05 ⋅ 0

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

CKeditor的爬坑之旅:vue项目下选择媒体库图片

最近在用vue写项目的管理后台,由于是电商+cms项目,所以我们开发了媒体库来管理所有的素材,但是问题来了,在发布文章的时候,我是用了开源的ckeditor,原来带的选择图片上传插件,只能自定...

unfind ⋅ 05/19 ⋅ 0

button 与label

1.创建⼀一个 button :buttonWithType:UIButton*button=[UIButton buttonWithType:UIButtonTypeRoundedRect]; //加方法创建,不需要 release //创建⼀一个什么样的 button 用 buttonWithType......

迷途阳 ⋅ 2016/02/22 ⋅ 0

php canvas 前端JS压缩,获取图片二进制流数据并上传

效果图(canvas压缩图片会失真): 参考: php canvas 前端JS压缩,获取图片二进制流数据并上传 https://www.cnblogs.com/-mrl/p/8708114.html js+php如何实现上传图片 https://www.jianshu....

豆花饭烧土豆 ⋅ 05/30 ⋅ 0

记一次小坑--关于window.open()

今天在公司的后台项目中遇到一个这样的需求:点击一个按钮,发送一个请求,然后用请求到的中的打开一个新窗口(跳转到另一个后台)。看起来应该没什么问题,很快代码写好了(vue项目,以下是...

nikolausliu ⋅ 05/11 ⋅ 0

一个demo学会css

全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 学习了css权威指南这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的css编程知识。...

luanpeng825485697 ⋅ 2017/08/03 ⋅ 0

小程序的填坑小技巧之Canvas

前言 小程序分享只能分享到好友或者微信群里,不能分享到朋友圈。 这周接到一个这样的坑爹需求,小程序需要实现一个图片分享的功能。让用户可以把图片发送到朋友圈或者其他渠道。 刚开始拿到...

dduke ⋅ 05/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win环境下jdk7与jdk8共存配置

1.jdk安装包 jdk安装包 安装步骤略 2.jdk等配置文件修改 在安装JDK1.8时(本机先安装jdk1.7再安装的jdk1.8),会将java.exe、javaw.exe、javaws.exe三个文件copy到了C:\Windows\System32,这...

泉天下 ⋅ 10分钟前 ⋅ 0

windows profesional 2017 build problem

.net framework .... https://stackoverflow.com/questions/43330915/could-not-load-file-or-assembly-microsoft-build-frameworkvs-2017...

机油战士 ⋅ 44分钟前 ⋅ 0

python3中报错的解决方法(长期更新)

1、ImportError: No module named ‘DjangoUeditor’ 出错原因:安装DjangoUeditor库适用于python2,需要下载适用python3的 下载地址:https://github.com/twz915/DjangoUeditor3 2、python3......

xiaoge2016 ⋅ 49分钟前 ⋅ 0

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 今天 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 今天 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 今天 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html AOP系列(一)——ProxyFactoryObject 显式创......

whoisliang ⋅ 今天 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 今天 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 今天 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部