文字水平居中和垂直居中的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 ...
随机推荐
- 20190625 Oracle优化查询(一)
与其惴惴不安,不如定心应变 前提:我的Oracle服务器是安装在Windows环境中的,没有上到Linux 查看表结构 查询全表 查找空值, 使用“=”是没有结果的,应该使用IS NULL
- SolidWorks学习笔记(一)
一.草图绘制 1.简单命令 先直线后圆弧,几何约束.尺寸标定 2.圆周阵列 3.几何关系——对称 添加几何约束:圆弧相等.关于竖直中心线的对称 4.捕捉圆心 5.尺寸锁定,有圆弧的,先直后圆 6. 7 ...
- pandas操作,按序号取列,按条件筛选,df格式转换等
这几天遇到比较多的dataframe操作,频繁使用,在此整理记录下,方便查找. 1.num为列的数字序号,name=df.columns[num],返回的是column的字符串名字,df[name]= ...
- Python学习【第4篇】:Python之文件操作
文件操作 读取一行 f=open("D:\\1.txt",'rb') print f.readline() f.close() 将文件内容保存在一个list with open(& ...
- 【Codeforces Global Round 1 C】Meaningless Operations
[链接] 我是链接,点我呀:) [题意] 给你一个a 让你从1..a-1的范围中选择一个b 使得gcd(a^b,a&b)的值最大 [题解] 显然如果a的二进制中有0的话. 那么我们就让选择的b ...
- 【Codeforces 158A】Next Round
[链接] 我是链接,点我呀:) [题意] 让你找到排名的前k名,并列的话,如果分数大于0那么就算晋级 问你最后有多少人可以晋级. [题解] 按照题意模拟就好, 先按照a[max] = a[k]的规则找 ...
- CF410div2 B. Mike and strings
/* CF410div2 B. Mike and strings http://codeforces.com/contest/798/problem/B 字符串 暴力 题意:给你n个串,每次操作可以将 ...
- git tag打标签常用命令
# 创建轻量标签$ git tag v0.1.2-light 切换到标签 与切换分支命令相同,用git checkout [tagname]查看标签信息用git show命令可以查看标签的版本信息:$ ...
- SQLiteOpenHelper/SQLiteDatabase/Cursor源代码解析
转载请注明出处:http://blog.csdn.net/y_zhiwen/article/details/51583188 Github地址.欢迎star和follow 新增android sqli ...
- DSP、Media、AdExchanger之间的关系及交互流程
广告商,如以下的樱花日语,淘宝卖家.其须要推广自己的产品. Zampdsp(晶赞) 是DSP平台.其与非常多广告商合作,广告商在平台上公布广告创意,并托付平台代为投放. tanx.com 是adExc ...