文字水平居中和垂直居中的CSS
首先选择一个需要显示文字的选择器,我这里选择的是微信小程序里面的<view>选择器,在其他语言(如html)的选择器里是一样的做法:
<view class="btn-item">编辑</view>
接下来针对 .btn-item 来写样式:
.btn-item{
  background-color: #fc8675;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  width: 100px;
  height: 100px;
  text-align: center;//水平居中
  line-height:100px;//控制垂直居中,要和元素高度相同
}
最后展示一下文字垂直和水平居中的效果:

非常简单啦,小伙伴们自己尝试一下吧~~
/******************************我是可爱的分割线********************************/

文字水平居中和垂直居中的CSS的更多相关文章
- div中文字水平和垂直居中的css代码
		
HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...
 - css实现div,文字水平居中的方案。
		
本文的目的为记录个人开发中常用的几种居中方案,以供大家参考. //basic css html, body { height: 100%; width: 100%; margin: 0; paddin ...
 - CSS水平居中和垂直居中解决方案
		
一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
 - CSS实例:水平居中和垂直居中的多种解决方案
		
1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同! Example Sourc ...
 - CSS设置行内元素和块级元素的水平居中、垂直居中
		
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
 - CSS 水平居中与垂直居中
		
前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...
 - 《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)
		
本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...
 - CSS中元素水平居中和垂直居中的方法
		
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
 - css图片居中(水平居中和垂直居中)
		
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
 
随机推荐
- 怎么用最短时间高效而踏实地学习Linux?
			
在技术行业里,人才的唯一衡量标准就是技术能力,而技术能力,就代表着你的薪资.职位.话语权.很多人都经历过,跟自己同时入行甚至入行还晚的人,成长速度却远超自己,短短两三年就拉开了差距. 秘密就在于,有些 ...
 - IDEA 基本配置
			
idea使用基本配置 1配置JDK开发环境 File->project structure: 2取消自动更新 file->setting:Appearance &Behavior下 ...
 - 基于jquery的常见函数封装
			
/// <reference path="jquery-1.8.0.min.js" />/** DIV或元素居中* @return*/jQuery.fn.mCenter ...
 - Linux - docker基础
			
目录 Linux - docker基础 docker的概念 docker安装流程 docker基本命令学习 docker 的 hello docker 运行一个ubuntu容器 Docker与Cent ...
 - zabbix 配置——bak
			
1.host 配置 create host Parameter Description Host name 主机名,只允许数字,空格,句号,下划线,非主流符号它不支持.zabbix客户端配置文件中的h ...
 - Django——6 模型基础ORM  数据库连接配置  模型的创建与映射  数据的增删改查
			
Django Django的ORM简介 数据库连接配置 模型的创建与映射 数据库的增删改查 增数据 查数据及补充 改数据 删数据 Django的ORM系统分析 ORM概念:对象关系映射(Objec ...
 - [USACO16OPEN]关闭农场Closing the Farm(洛谷 3144)
			
题目描述 Farmer John and his cows are planning to leave town for a long vacation, and so FJ wants to tem ...
 - 使用applescript脚本方式以管理员权限运行
			
- (BOOL) runProcessAsAdministrator:(NSString*)scriptPath withArguments:(NSArray ...
 - Java排序算法之冒泡、选择、插入、快速
			
JavaSort Java经典排序算法代码 2018-1-26更新:冒泡排序,选择排序,插入排序,快速排序 1. 冒泡排序 特点:效率低,实现简单 思想(从小到大排): 第1个数和第2个数比较,如果第 ...
 - Delphi春天将来临,Android遇到XE7我也是醉了,Hello World
			
回首往日,从Delphi 7走到如今.总感觉不愠不火.期间论坛倒掉无数,没倒掉的也半死不活,大批的程序猿转向C#,Java,PHP. Delphi的开发高效有目共睹,一直不忍放弃.Delphi以前一夜 ...