首先选择一个需要显示文字的选择器,我这里选择的是微信小程序里面的<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. EF入门

    1.(安装EF)右键项目

  2. 洛谷——P1183 多边形的面积

    P1183 多边形的面积 多边形求面积公式: $\frac {\sum_{i=0}^{n-1}(x_iy_{i+1}-y_ix_{i+1})}{2}$ #include<bits/stdc++. ...

  3. vue项目中的常见问题(vue-cli版本3.0.0)

    一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...

  4. Cookie, LocalStorage 与 SessionStorage说明

     一.Cookie    Cookie 大小限制为4KB左右,不适合大量数据的存储.因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高.它的主要用途有保存登录信息,比如你 ...

  5. js 保留几位小数位数

    定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.

  6. 《高性能MySQL》笔记-BLOB与TEXT

    BLOB和TEXT都是为存储很大的数据而设计的字符串数据类型,分别采用二进制和字符方式存储. 实际上,它们分别属于两组不同的数据类型家族: 字符类型是TINYTEXT,SMALLTEXT,TEXT,M ...

  7. Eleastisearch6.0.0 read_only_allow_delete: false

    Eleastisearch6.0.0由单节点升级到多节点集群cluster时候出现的分片同步错误问题解决 原创 2018年01月18日 16:33:21 5 启动多个节点的ES后,ES开始推举mast ...

  8. java中Long 和long的区别

    Java的数据类型分两种:1.基本类型:long,int,byte,float,double,char2. 对象类型(类): Long,Integer,Byte,Float,Double,Char,S ...

  9. [poj3974]Palindrome_Manacher

    Palindrome poj-3974 题目大意:求字符串的最长回文子串. 注释:$1\le strlen(s) \le 10^6$. 想法:介绍一种字符串算法——Manacher.求以每一个字符和字 ...

  10. P1265 公路修建 洛谷

    https://www.luogu.org/problem/show?pid=1265 题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公 ...