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

为什么80%的码农都做不了架构师？>>>   

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

   

   1.图片与按钮 处于同一行，并居中对齐，长使用的方法如下：

    
    按钮

    使用属性 vertical-algin:middle   使元素的基线与父元素的基线对齐。

以下部分，借鉴于以下bolg: http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

2.图片与文字处于同一行并居中对齐，也可以使用上面的这种方法，还有一种方法如下：

 a. 大小不固定，单行文字的垂直居中

    单行文字垂直居中，使用line-height，将line-height值与外部标签盒子的高度设置成一致即可。；

b.多行文字

   当不确定文字有几行的情况下，如何实现垂直居中对齐勒？ 其实最简单的方法是讲文字封装起来，把文字当做图片来处理，用标签将所有文字封装起来。代码如下：

单行文字居中测试单行文字居中测试单行文字居中测试单行文字居中测试单行文字居中测试 

  

3. 大小不固定，图片垂直居中

    a. 透明图片 + 背景定位

    使用background-position:center 实现图片居中显示。  使用一个透明的gif图片做覆盖层，高宽拉伸至所需大小，然后设置背景图居中的属性，

   html代码如下：

    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 和文字大小控制居中

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

转载于:https://my.oschina.net/trhxf/blog/540672