1.设置文字水平居中

内联元素(行内元素)使用: text-align: center; 使用后文字仍然没有居中

解决方法:设置width:100%;

块元素使用: margin: 0 auto;

2.设置文字垂直居中

注意:如果设置了border则会出现误差,其次分清楚行距与行高

可以使用伪类元素,设置如下:

.text{
width: 16px;
height: 16px;
font-size: 10px;
text-align: center;
}
.text::after{
content: ' ';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
margin-top: 1px;
}

设置 text-align: center;line-height:height 居中无效的更多相关文章

  1. 解决html设置height:100%无效的问题

    通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...

  2. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  3. 火狐中,设置align="center"失效的解决方法

    如下: <img align="center" style="vertical-align:top"></img> 只需要加上: ver ...

  4. ComboBox设置Text属性

    WPF  ComboBox 控件设置 Text属性时 必须将 IsEditable="true" 才能显示

  5. winform中的ComboBox同时设置text和value的方法

    winform中的ComboBox不能像webform中的dropdownlist控件一样,在属性中可以同时设置text和value值,可以通过编写一个新类来实现这个功能. 1.首先在form1中添加 ...

  6. 【高德地图API】SDK v1.1.1 在代码中设置Map中心点Center级别不起作用

    有时候你在初始化地图时不是直接在xaml中设置Map的Center,而是在cs代码中设置Center或者设置SetZoomAndCenter改变中心点和缩放级别.你可能会发现,不起作用. 这边提出的解 ...

  7. bootstrap的Alerts中 可以放置p标签 设置 align="center" 用来设置文本居中

    效果

  8. jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存

    each 方法 $ ( selector).each(function( index,element) {  } );   参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...

  9. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

随机推荐

  1. JAVA环境的JAVA_HOME, PATH 和CLASS_PATH设置

    Windows下JAVA用到的环境变量主要有3个,JAVA_HOME.CLASSPATH.PATH.下面逐个分析. 简单来讲, 1.path是os用 classpath java用 JAVA_HOME ...

  2. Django博客开发教程,Django快速开发个人blog

    学DjangoWEB框架,估计大部分的朋友都是从Blog开发开始入门的,Django中文网发布了一个Django开发教程,这个教程简单易懂,能让你快速的使用Django开发一个漂亮的个人blog,是D ...

  3. Bash Shell 小试牛刀

    一.终端打印 [root@cai ~]# echo welcome to bash! welcome to bash! [cairui@cai ~]$ echo 'welcome to bash!' ...

  4. Redis及虚拟机windows两种环境安装配置

    ---恢复内容开始--- Redis  /rae  dis/是一个开源的Key-Value数据库.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链 ...

  5. P2105 K皇后

    题意:$n*m$棋盘放置k个皇后,问几个格子不被攻击 1≤n,m≤20000,1≤k≤500 开set判重暴力$O(n*k)$然而,setMLE了QAQ 正解确实是$O(n*k)$的 以hang[i] ...

  6. NSFileManager在初始化文件的时候一不留神就进入陷阱

    今天调试一个程序,内容是在手机一个本地路径生成一个缓存文件,在生成本地路径的时候犯了一个错误,本着求原因的精神调试了2个小时,终于找到原因了 刚开始断点调试的时候,执行到第13行,这里死活不给写入数据 ...

  7. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. react 中文文档案例二 (头像时间)

    import React from 'react'; import ReactDOM from 'react-dom'; function formatDate(date) { return date ...

  9. haproxy安装:

    haproxy安装: tar zxf haproxy-1.4.24.tar.gz            ##解压 yum install rpm-build -y                   ...

  10. Java学习笔记day07_琐碎知识_水仙花数_ASCII码_冒泡排序_简单选择排序_折半查找

    琐碎知识: 水仙花数, ASCII码, 冒泡排序, 简单选择排序, 折半查找 1.水仙花数 每位数的平方的和等于本身. 如100到999之间的水仙花数满足: 个位的平方+十位的平方+百位的平方 = 本 ...