图片和文字垂直对齐

最新推荐文章于 2024-05-05 00:56:26 发布

薛定谔的喵喵喵

最新推荐文章于 2024-05-05 00:56:26 发布

阅读量6.7k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/gongzhonghua/article/details/80728839

版权

前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

思路一. 分别给图和文字设置宽高，然后再让它们分别居中对齐不就好了,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
评论
图片和文字垂直对齐

相信大家画页面时基本每页必有一个这样字的东西，图标和文字的组合体。直接用图标库里的图标还好，然而要是图片形式的图标,就碰到了一个垂直对齐问题。思路一. 分别给图和文字设置宽高，然后再让它们分别居中对齐不就好了,line-height和vertical-align结合使用。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta char...
复制链接

扫一扫

专栏目录