<view class='kk'>
水平垂直居中文字
</view>
.kk{
border: 1px solid #000000;
width: 200px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 200px;
}

其中line-height需要注意下。

<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
.flex-wrp {
display: flex;
} .flex-item.bc_green {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
} .flex-item.bc_red {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
} .flex-item.bc_blue {
width: 100px;
height: 100px;
background-color: blue;
text-align: center;
line-height: 100px;
}

下面这种写法也是可以的:

.flex-wrp {
display: flex;
}
.flex-item{
display: flex;
width: 100px;
height: 100px;
justify-content: center;
align-items: center;
} .bc_green {
background-color: green;
} .flex-wrp .flex-item.bc_red {
background-color: red;
} .flex-wrp .flex-item.bc_blue {
background-color: blue;
}

CSS:文字水平居中的写法的更多相关文章

  1. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  2. 关于DIV内文字垂直居中的写法

    最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...

  3. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

  4. css 文字垂直居中问题

    CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...

  5. Css 基本的规则写法

    样式表的写法: css的语法由一些标志构成,就是一个基本的样式表由选择器,属性和属性值构成.Css有标准的写法规则标准的css写法: h1 { Font-family:黑体;} h1:表示选择符Fon ...

  6. css如何实现水平居中呢?css实现水平居中的方法?

    面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中. 首先分两种情况,行内元素还是块级元素.然而块级元素又分为定宽块状元素和不定款块状元素.先来看下行内元素如何水平居中 ...

  7. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  8. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  9. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

随机推荐

  1. windows2012 下面php7.2 安装mongodb4.0.4的扩展以及操作mongodb的方法

    php连接mongodb驱动 的下载页面http://pecl.php.net/package/mongodb 数据插入: $manager = new MongoDB\Driver\Manager( ...

  2. C# 3.0

    序言 自动实现的属性 匿名类型 查询表达式 Lambda 表达式 从 C# 3 开始,lambda 表达式提供了一种更简洁和富有表现力的方式来创建匿名函数. 使用 => 运算符构造 lambda ...

  3. poj 2187 Beauty Contest 凸包模板+求最远点对

    题目链接 题意:给你n个点的坐标,n<=50000,求最远点对 #include <iostream> #include <cstdio> #include <cs ...

  4. [HG]腿部挂件 题解

    前言 暴力跑的比正解快. 以下暴力(循环展开+fread读入输出优化) #include<cstdio> #pragma GCC optimize(3, "Ofast" ...

  5. Codeforces 482E ELCA (LCT)

    题目链接 http://codeforces.com/contest/482/problem/E 题解 T2智商题T3大LCT题,我一个也不会= = CF的标算好像是分块?反正现在LCT都普及了就用L ...

  6. 应对高并发场景的redis加锁技巧

    // 获取锁getLock() {    // 是否有正在执行的线程    boolean hasLock = false;    try {        hasLock = redisClient ...

  7. x_-admin

    https://www.cnblogs.com/shikaishikai/p/9699076.html

  8. C++入门经典-例2.11-流输出小数控制

    1:代码如下: // 2.11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  9. navicat常用快捷键与SQL基本使用

    一.Navicat常用快捷键 1,Ctrl+q就会弹出一个sql输入窗口 2,Ctrl+r就执行sql了 3,按f6会弹出一个命令窗口 4,Ctrl+/ 注释 5,Ctrl +Shift+/ 解除注释 ...

  10. Android 多分辨率与不同语言适配

    一.适配不同国家语言 智能手机系统设置里各国语言的选项,然后我们项目里可以通过资源目录实现适配语言.我们知道工程的根目录有个res/的目录,res/下有一个资源类型的目录,其中有个values/str ...