图片和文字垂直对齐

相信大家画页面时基本每页必有一个这样字的东西,图标和文字的组合体。直接用图标库里的图标还好,然而要是图片形式的图标,就碰到了一个垂直对齐问题。

思路一. 分别给图和文字设置宽高,然后再让它们分别居中对齐不就好了,line-height和vertical-align结合使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<style>
    .main {
      margin: 2.5rem auto;
      text-align: center;
      height: 1.5rem;
      line-height: 1.5rem;
    }
    i {
      display: inline-block;
      width: 0.675rem;
      height: 0.525rem;
      background: url(../img/eye.png) 0 center no-repeat;
      -webkit-background-size: 0.675rem 0.525rem;
      background-size: 0.675rem 0.525rem;
      text-indent: 0.925rem;
      height: 0.8rem;
      line-height: 0.9rem;
    }
    .m-txt {
      font-size: 0.6rem;
      vertical-align: middle;
    }
</style>
	</head>
	<body>
		<div class="main">
			<i></i><span class="m-txt">我要和图片对齐</span>
		</div>
	</body>
</html>

然而现实是这样子的.


最终找到的解决方案是直接使用flex布局.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<link rel="stylesheet" href="css/index.css" />-->
		<style>
			.main{
			   display: flex;
			   align-items: center;/*子元素垂直居中*/
			   justify-content: center;/*子元素水平居中*/
			}
			i{
			  display: inline-block;
			  width: 0.675rem;
			  height: 0.525rem;
			  background: url(img/eye.png) 0 center no-repeat;
			  -webkit-background-size: 0.675rem 0.525rem;
			  background-size: 0.675rem 0.525rem;
			}
			
			.m-txt{
				font-size: 0.6rem;
			}
		</style>
		<script>
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(!clientWidth) return;
						docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
						if(clientWidth>1260){
							docEl.style.fontSize = 40+'px'
						}
					}();
				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
	</head>
	<body>
		<div class="main">
			<i></i><span class="m-txt">我要和图片对齐</span>
		</div>
	</body>
</html>


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值