因为一直为元素居中问题而困扰，所以决定把自己遇到和看到的方法记录下来，以便以后查看
  1. 如果要让inline或inline-block元素居中显示，则父元素css中包含text-align:center;
  2. 如果让block元素居中，为其本身添加margin:0 auto;
  3. 复杂情形下可以用： 
    display:flex;  /*盒子模型*/
    
flex-direction: row;  /*横向*/
    
justify-content: space-around; /*主轴居中*/
    
align-items: center; /*纵轴居中*/
    



												


											
CSS文本居中显示的更多相关文章
	

    
								
  1. 重写TextView，实现圆形背景，文本居中显示
		
    最近,在做考试试题排版,产品提出题号希望显示成圆形背景,序号文本居中显示. (有点问题:文本没有绝对居中,暂时没做处理.) 为此,我采取的方式是重写TextView的onDraw方法,绘制一个圆形背景 ...
    
		
    2. 
						
  2. CSS文本溢出显示省略号
		
    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
    
		
    3. 
						
  3. css div居中显示的4种写法
		
    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
    
		
    4. 
						
  4. CSS——盒子居中显示
		
    嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...
    
		
    5. 
						
  5. css 文本省略号显示
		
    文本省略号是非常常见的需求,而省略号展示又通常分为俩种情况折行和不折行.不折行: div { white-space:nowrap;/* 规定文本是否折行 */ overflow: hidden;/* ...
    
		
    6. 
						
  6. css 文本单行显示溢出时出现省略号  多行显示溢出时出现省略号   首行缩进
		
    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...
    
		
    7. 
						
  7. css   单行文本居中显示，多行文本左对齐
		
    父级元素 text-align:center; 自级元素 text-align:left; display:inline-block;
    
		
    8. 
						
  8. css 文本两行显示，超出省略号表示
		
     重点:text-overflow: ellipsis;只对display:inline:起作用 例子: <span class="a">我说说<b class= ...
    
		
    9. 
						
  9. css 文本溢出显示省略号
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. “1+X”证书Web前端开发等级考试简介
			
    考试简介 “1+X”证书制度是为了深入贯彻党的十九大精神和全国教育大会精神,教育部会同国家发展改革委.财政部.市场监管总局制定了<关于在院校实施“学历证书+若干职业技能等级证书”制度试点方案&g ...
    
			
    2. 
						
  2. ajax传map，后端接收并解析
			
    前端let map = new Map(); map.set(1, 1); map.set(2, 2); map.set(3, 3); //map转obj let obj= Object.create ...
    
			
    3. 
						
  3. HyperLedger Fabric 资料网址大全
			
    BLOCKCHAIN FOR DEVELOPERS 官方网址 i. 这个网址是ibm给的测试网址,注册进去就可以设置4个节点的区块链,而且有智能合约可以测试 区块链和HyperLedger开源技术讲堂 ...
    
			
    4. 
						
  4. 吴裕雄 python 神经网络——TensorFlow实现搭建基础神经网络
			
    import numpy as np import tensorflow as tf import matplotlib.pyplot as plt def add_layer(inputs, in_ ...
    
			
    5. 
						
  5. TensorFlow：使用inception-v3实现各种图像识别
			
    程序来自博客: # https://www.cnblogs.com/felixwang2/p/9190740.html上面这个博客是一些列的,所以可以从前往后逐一练习. # https://www.c ...
    
			
    6. 
						
  6. oracle错误代码大全(超详细)
			
    本篇文章是对oracle错误代码进行了详细的总结与分析,需要的朋友参考下 ORA-00001: 违反唯一约束条件 (.)ORA-00017: 请求会话以设置跟踪事件ORA-00018: 超出最大会话数 ...
    
			
    7. 
						
  7. PCC值average pearson correlation coefficient计算方法
			
    1.先找到task paradise 的m1-m6: 2.根据公式Dy=D1* 1/P*∑aT ,例如 D :t*k1   a:k2*k1: Dy :t*k2 Dy应该有k2个原子,维度是t: 3.依 ...
    
			
    8. 
						
  8. Python基础（一） Python3环境搭建
			
    转载清注明原文地址,谢谢. OS:Windows 10 第一步,从Python官方下载安装包 Windows端下载地址:https://www.python.org/downloads/windows ...
    
			
    9. 
						
  9. 常用的php函数
			
    最严格身份证号码验证,支持15位和19世纪出生的人的身份证号码 # 计算身份证校验码,根据国家标准GB 11643-1999 function idcard_verify_number($idcard ...
    
			
    10. 
						
  10. 使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载
			
    官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload 引入 Lazyload 是 Vue 指令,使用前需要对指令进行注册 import Vue fro ...
    
			
    11.