相信大家画页面时基本每页必有一个这样字的东西，图标和文字的组合体。直接用图标库里的图标还好，然而要是图片形式的图标,就碰到了一个垂直对齐问题。
思路一. 分别给图和文字设置宽高，然后再让它们分别居中对齐不就好了,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>
