首先选择一个需要显示文字的选择器,我这里选择的是微信小程序里面的<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. 【转载】文件上传Expected MultipartHttpServletRequest: is a MultipartResolver错误解决

    引入包commons-fileupload-*.jar,版本号可以根据项目情况调整: 在spring mvc配置文件中增加配置,文件大小限制可根据项目情况调整: <!-- 上传文件拦截,设置最大 ...

  2. function&箭头函数

    JS中this到底指向谁? function:谁调用指向谁 var id = '654321' var handler = { id: '123456', init: function() { con ...

  3. cmake更新版本简记

    问题描述: 由于需求,要在服务器上安装ANTs(Advanced Normalization Tools).然而最新版的ANTs需要下载源码并用cmake编译, 于是根据https://github. ...

  4. 【数值计算方法】二分法求根的C++简单实现

    给定精确度ξ,用二分法求函数f(x)零点近似值的步骤如下: 1 确定区间[a,b],验证f(a)·f(b)<0,给定精确度ξ. 2 求区间(a,b)的中点c. 3 计算f(c). (1) 若f( ...

  5. Sessions共享技术设计

    概述 分布式session是实现分布式部署的前提, 当前项目由于历史原因未实现分布式session, 但是由于在kubernets中部署多个pod时, 负载均衡的调用链太长, 导致会话不能保持, 所以 ...

  6. java常见知识

    在JSP页面获取当前项目名称的方法: 方法1: <%= this.getServletContext().getContextPath() %> 方法2: 使用EL表达式 ${pageCo ...

  7. redis学习三,Redis主从复制和哨兵模式

    Redis主从复制 java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 1.Master可以拥有多个slave 2.多个slave可以连接同一个Master外,还可以连接到其他的slav ...

  8. 清北学堂模拟赛d3t2 b

    分析:一道比较让人头疼的数学题. 先考虑怎么让分出来的三角形相似,先不考虑每个三角形的具体边长,设每个三角形的周长为li,则可知必然有一个数g = gcd{li},每一个三角形的周长都是g的倍数,这样 ...

  9. Ext.Ajax.request方法 参数

    json数据服务器回传的方法. 在api总指出回传的格式{success;true,data:{clientName: "Fred. Olsen Lines",   portOfL ...

  10. linux服务器中不支持soap及bcmul函数的结局方法

    新的程序里用了webserice接口,部到服务器,先是提示:bcmul() 函数不可用,网上搜索一番,得知这是php的高精度函数,需要在编译php的时候加入此模块,于是在编译脚本里增添 “–enabl ...