码迷,mamicode.com
首页 > 其他好文 > 详细

文字居中贯穿线

时间:2017-04-24 17:48:55      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:title   利用   log   meta   otto   char   pos   logs   text   

前述:

  类似于京东的这种文字居中于贯穿线

技术分享

代码展示:

    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0px;padding:0px;}
			.wrap{width:1000px;margin:200px auto;}
			.grid{width:1000px;border-bottom:1px dashed #000;height:20px;position: relative;}
			.grid h3{width:100px;line-height:40px;font-size:20px;text-align: center;background: #fff;position: absolute;top:0px;left:500px;}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="grid">
				<h3>享品质</h3>
			</div>
		</div>
		
	</body>
</html>

 效果展示:

技术分享

知识点总结:

  1.单行文字垂直居中:height=line-height,text-align:center(盒子内的文字或者图片水平居中);

  2.利用 线的height=文字line-height/2,来实现文字居中贯穿线;

 

文字居中贯穿线

标签:title   利用   log   meta   otto   char   pos   logs   text   

原文地址:http://www.cnblogs.com/yang0901/p/6757994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!