首先选择一个需要显示文字的选择器,我这里选择的是微信小程序里面的<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的更多相关文章

  1. div中文字水平和垂直居中的css代码

    HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...

  2. css实现div,文字水平居中的方案。

    本文的目的为记录个人开发中常用的几种居中方案,以供大家参考. //basic css html, body { height: 100%; width: 100%; margin: 0; paddin ...

  3. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  4. CSS实例:水平居中和垂直居中的多种解决方案

    1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同! Example Sourc ...

  5. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  6. CSS 水平居中与垂直居中

    前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...

  7. 《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  8. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  9. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

随机推荐

  1. uva-156(Ananagrams UVA - 156)

    map容器的模板题,判断是否能交换字母顺序变成另外一个单词,只需要先把单词都变成小写字母.然后再按字母字典序排序,放入map中进行计数,然后把计数为一的再放入另一个容器,再排序输出即可 我的代码(刘汝 ...

  2. 升级 Linux 内核版本(编译源代码)

    升级内核版本(自己编译源码) 从 linux 官网 https://www.kernel.org/ 下载内核源码 解压 tar -xvf linux-4.16.8.tar.xz cd linux-4. ...

  3. Mysql - ORDER BY详解

    0 索引 1 概述 2 索引扫描排序和文件排序简介 3 索引扫描排序执行过程分析 4 文件排序 5 补充说明 6 参考资料 1 概述 MySQL有两种方式可以实现ORDER BY: 1.通过索引扫描生 ...

  4. Problem 21

    Problem 21 https://projecteuler.net/problem=21 Let d(n) be defined as the sum of proper divisors of  ...

  5. JavaScript初步学习----基本使用,简单事件,修改样式,数据类型

    JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言   用于页面特效,前后交替,后台开发(node)   JavaScript写在s ...

  6. 绿色地址栏扩展验证(EV)SSL证书、支持SGC 强制最低128位

      Pro With EV SSL证书,最严格的域名所有权和企业身份信息验证,属于最高信任级别.最高安全级别的 EV SSL证书,该证书可以使地址栏变成高安全绿色,并且在地址栏内显示您公司的名称,提高 ...

  7. [国家集训队2012]JZPFAR

    [国家集训队2012]JZPFAR 题目 平面上有n个点.现在有m次询问,每次给定一个点(px, py)和一个整数k,输出n个点中离(px, py)的距离第k大的点的标号.如果有两个(或多个)点距离( ...

  8. noip模拟赛 钻石

    分析:用裸暴力可以得60分,每次dfs,看第i个盒子到底有没有钻石就行了.其实这很像0/1背包问题,只是多了一个m的限制.这要怎么办呢?因为概率是可以加减的,所以可以先不考虑m的限制,求出概率,然后d ...

  9. 清北学堂模拟赛d4t2 b

    分析:比较复杂的一题. 首先要求k个mod m互不相同且和为n的数ai,我们可以转化为求和为k个bi,并且(Σbi) % m = n % m 其中bi=ai % m,接下来可以用dp求出选了i个b,和 ...

  10. Windows 10卸载Edge浏览器(不成功的别试了)

    在命令行输入: PowerShell dir $env:LOCALAPPDATA\Packages\*edge*^|ren -newname MicrosoftEdge.old ; dir $env: ...