css实现单行文本及多行文本垂直居中

作者: MJ 分类: css 发布时间: 2019-04-03 11:11

方法一:用flex来实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			font-size:14px;
			padding:15px;
		}
		.demo{
			overflow: hidden;
			display: flex;
			align-items: center;
		}
		.demo span{
			display: inline-block;
		}
		.name{
			width:50px;
		}
		.sex{
			width:25px;
		}
		.card{
			flex:1;
		}
	</style>
</head>
<body>
	<div class="demo">
		<span class="name">姓名姓名姓名姓名姓名姓名</span>
		<span class="sex">男</span>
		<span class="card">证件号码445544555544558887</span>
	</div>
</body>
</html>

方法二:display:table

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			font-size:14px;
			padding:15px;
		}
		.demo{
			overflow: hidden;
			display: table;
		}
		.demo span{
			display: table-cell;
			vertical-align: middle;
		}
		.name{
			width:50px;
		}
		.sex{
			width:25px;
		}
		.card{
			width:calc(100% - 50px -25px);
		}
	</style>
</head>
<body>
	<div class="demo">
		<span class="name">姓名姓名姓名姓名姓名姓名</span>
		<span class="sex">男</span>
		<span class="card">证件号码445544555544558887</span>
	</div>
</body>
</html>

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注