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. Django个人博客开发 | 前言

    本渣渣不专注技术,只专注使用技术,不是一个资深的coder,是一个不折不扣的copier 1.前言 自学 Python,始于 Django 框架,Scrapy 框架,elasticsearch搜索引擎 ...

  2. Eclipse导入GitHub项目两处报错处理

    1.项目出现Could not calculate build plan:pligin 错误解决办法: 删除本地.m2仓库中 org.apache.maven.plugins:maven-resour ...

  3. MPI环境配置

    单机多核配置:https://www.cnblogs.com/shixiangwan/p/6626156.html 多计算机配置:https://blog.csdn.net/WASEFADG/arti ...

  4. [CF1051F]The Shortest Statement (LCA+最短路)(给定一张n个点m条有权边的无向联通图,q次询问两点间的最短路)

    题目:给定一张n个点m条有权边的无向联通图,q次询问两点间的最短路 n≤100000,m≤100000,m-n≤20. 首先看到m-n≤20这条限制,我们可以想到是围绕这个20来做这道题. 即如果我们 ...

  5. Educational Codeforces Round 3 A

    A. USB Flash Drives time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. 微信小程序填坑之旅

    一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2 ...

  7. django模型层之多表操作 增删改查

    多表操作之创建模型 这边以书为中心创建一个模型 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的关系(on ...

  8. 查询linux服务器有哪些IP在连接

    查询linux服务器有哪些IP在连接 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看linux的 ...

  9. java web关于文件上传下载的总结

    文件上传使用<form method="POST"   enctype="multipart/form-data"> , 而不是默认的applica ...

  10. java——虚拟机、线程

    java虚拟机: 是一台想象中的机器,有自己想象的硬件(处理器.堆栈.寄存器等)以及相应的指令系统. 生命周期:当执行java程序时,虚拟机开始运行,程序结束虚拟机停止.同一台计算机每多运行一个程序, ...