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. 最小生成树算法 prim kruskal两种算法实现 HDU-1863 畅通工程

    最小生成树 通俗解释:一个连通图,可将这个连通图删减任意条边,仍然保持连通图的状态并且所有边权值加起来的总和使其达到最小.这就是最小生成树 可以参考下图,便于理解 原来的图: 最小生成树(蓝色线): ...

  2. Linux防火墙详解

    1.Linux防火墙基础 作为隔离内外网.过滤非法数据的有力屏障,防火墙通常按实现环境的不同分为硬件防火墙和软件防火墙.硬件防火墙是功能专一的硬件设备,具有比较全面的功能,其工作效率较高,但是加个昂贵 ...

  3. c#生产/消费RabbitMQ

    public sealed class JsonSerializer { public static byte[] Serialize(object message) { return Encodin ...

  4. LeeCode(No2 - Add Two Numbers)

    LeeCode是一个有意思的编程网站,主要考察程序员的算法 第二题: You are given two non-empty linked lists representing two non-neg ...

  5. Spring boot的热部署

    当把配置文件,比如yml也打到jar包后,如何修改配置,而又不用重新发布呢? 在jar包同一目录下,放置Application.yml (注意,不管jar包内是否此文件名)修改配置文件后,重新启动ja ...

  6. python3 关键字和可变参数笔记

    """普及一下字典的知识""" # dict = {'Name': 'Runoob', 'Age': 7, 'Class': 'First' ...

  7. linux 6 安装 使用 XtraBackup

    帮助文档:https://www.cnblogs.com/imweihao/p/7290026.html ---Yum安装 官网地址:https://www.percona.com/doc/perco ...

  8. vue proxyTable 接口跨域请求调试(五)

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...

  9. vector 中需要注意的东西!

    vector的erase方法注意点!!! C++11是这样的: iterator erase (const_iterator position); iterator erase (const_iter ...

  10. sqoop导入数据

    来源https://www.cnblogs.com/qingyunzong/p/8807252.html 一.概述 sqoop 是 apache 旗下一款“Hadoop 和关系数据库服务器之间传送数据 ...