文字居中贯穿线

前述:

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

代码展示:

    

<!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,来实现文字居中贯穿线;

时间: 2024-10-29 09:30:15

文字居中贯穿线的相关文章

Android ToolBar标题文字居中的方法

在项目的开发中,使用苹果手机的产品,出的界面效果图极有可能(我这里是一定)完全是按照苹果的界面风格来出的,例如界面顶部的title文字位置是水平居中 如图: 那么问题来了,当我们使用ToolBar控件进行开发时,ToolBar的文字位置默认是靠左对齐的,不过这不能难道聪明的安卓开发者,解决方法如下: 1.只需要在ToolBar中添加TextView控件,设置位置为水平居中即可,代码奉上 <?xml version="1.0" encoding="utf-8"?

android canvas drawText()文字居中

近期也是在学习自己定义控件,曾经仅仅自己随便玩了下,一直认为比較难,正好如今工作轻松,每天闲着就看看书看看帖子学习自己定义控件,你还别说自己定义控件学起来还是蛮有趣的!! 这里也跟大家分享下我关于drawText()文字居中的方法. 先附上drawText()的方法说明 说实话当时看了这个,我也没明确这个x,y坐标究竟表达的啥意思,还一直以为是绘制文字中心的坐标,后来发现这个理解是错误的 要想理解这个首先看张图 像图上这样安卓的文字绘制是相对于基线绘制的,也就是图中的红线,而top+bottom

css实现一行文字居中,多行文字左对齐

问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框,提示内容比较多时,内容居左对齐.但是其纯CSS实现有点麻烦,一般就放掉这个需求,或者,使用JS实现. 解决方案: 效果如下 CSS实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars

让Spinner中的文字居中

如果套用simple_spinner_item或是simple_spinner_dropdown_item,然后直接在Spinner中用 android:gravity="center" 是无法让Spinner中的文字居中的. 这是因为Spinner中的文字其实是套在TextView中的(参考:http://www.douban.com/note/483280526/?type=like#sep). 一开始我想到的一种办法: 在spinner外面嵌套一个LinearLayout,设置a

Android TextView 文字居中

有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_TxtTitle.setGravity(Gravity.CENTER); 备注:android:gravity和android:layout_gravity的区别在于前者对控件内部操作,后者是对整个控件操作. 例如:android:gravity="center"是对textView中文字居中 android:layout_gr

完美解决移动Web小于12px文字居中的问题

前几天的一篇博文:移动Web单行文字垂直居中的问题,提到了移动web里小于12px的文字居中异常的问题,最后还是改为12px才近乎解决了问题.但是有时候或许并不是那么乐观,你并不能将原本定为10px的字体改为12px.那该怎么办呢. 我们都知道,移动端为了高清屏显示1px的border,会有那么几种方法,通常最好的方法是transform scale,并且支持圆角.既然一个border能缩放,那么整个文字区域自然也能缩放. 比如上篇博文里的示例,CSS是这样的: .label { height:

设置TextView文字居中

有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_TxtTitle.setGravity(Gravity.CENTER); 备注:android:gravity和android:layout_gravity的区别在于前者对控件内部操作,后者是对整个控件操作. 例如:android:gravity="center"是对textView中文字居中 android:layout_gr

如何让一个字数不定,行数不定的文字居中?

这两天写页面的时候,遇到一个问题:如何让一段行数和字数不定的文字居于区块的中央 下面是我的方法,可能有点麻烦. 如果路过的各位前辈,有更好的方法,还请在留言中指出.非常感谢. *** 结构 *** <div class="item"> <div class="pic_wrapper"> <img src="https://dummyimage.com/120.png/09f/fff" alt="作者的头像&

Android、IOS文字居中偏离的解决方案

前言 移动端开发,经常会遇到的问题,就是文字居中.一般都只能往css方向去fix这个问题. 自己以前也用过position:relative;top:-*px的方式去解决.?? 后来才发现,原来不是css的问题,是浏览器在渲染象形文字时,就已经错误了. 本文参考自知乎回答,用来总结如何填上这个坑- 一.css文字居中 先总结下,前端开发中,常用的文字居中技巧. 常规方法 height:20px; line-height:20px; table-cell方式 <p class="text-w