文字水平居中和垂直居中的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 ...
随机推荐
- BZOJ 2894: 世界线 广义后缀自动机
Code: #include<bits/stdc++.h> #define maxn 300000 #define ll long long using namespace std; ve ...
- Python学习【第3篇】:Python之运算符
一.运算符 计算机可以进行的运算有很多种,不只是加减乘除,它和我们人脑一样,也可以做很多运算. 种类:算术运算,比较运算,逻辑运算,赋值运算,成员运算,身份运算,位运算,今天我们先了解前四个. 算术运 ...
- web开发如何使用高德地图API(四)通过AMap.Marker自定义标点
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- [bzoj4796][CERC2016]Key Knocking_乱搞
Key Knocking bzoj-4796 CERC-2016 题目大意:描述没有题面短系列..题目链接 注释:$1\le n\le 10^5$. 想法: 乱搞稳AC.考试的时候调试信息又一次杀死了 ...
- php表单常用正则表达式
<?php /** * @description: 正则表达式匹配 */ class Regex { /** * @手机号 */ public static function Phone($su ...
- CF #319 div 2 E
在一个边长为10^6正方形中,可以把它x轴分段,分成1000段.奇数的时候由底往上扫描,偶数的时候由上往下扫描.估计一下这个最长的长度,首先,我们知道有10^6个点,则y邮方向最多移动10^3*10^ ...
- mvn 仓库
http://mvnrepository.com/artifact/org.postgresql/postgresql/9.3-1103-jdbc41 ------------------------ ...
- Lightoj 1235 - Coin Change (IV) 【二分】
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1235 题意: 有N个硬币(N<=18).问是否能在每一个硬币使用不超过两 ...
- cannot find -l****问题的解决的方法
在ubuntu下编译C或cpp文件时,可能会出现找不到链接库的问题,其形式为: cannot find -l**** 这里的**通常是指的链接库.比方,刚刚装好opencv,依照网上教程一步步编译好了 ...
- Android之使用MediaMetadataRetriever类获取视频第一帧
一.首先,来介绍一下MediaMetadataRetriever类,此类位于android.media包下,这里,先附上可查看此类的API地址:MediaMetadataRetriever类.大家能够 ...