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. [BZOJ1799][Ahoi2009]self 同类分布(数位dp)

    题目描述 给出两个数 a,ba,b ,求出 [a,b][a,b] 中各位数字之和能整除原数的数的个数. 输入输出格式 输入格式: 一行,两个整数 aa 和 bb 输出格式: 一个整数,表示答案 输入输 ...

  2. oracle数据库性能

    性能视图V$开头 V$SYSTEM_EVENT 正在等待的资源的系统信息 V$SESSION_EVENT 会话累计发生的等待事件 V$SESSION_WAIT 会话正在等待或者曾经等待的详细时间信息 ...

  3. 4、OpenCV Python 像素运算

    __author__ = "WSX" import cv2 as cv import numpy as np #前提需要运算的图像大小和类型完全相同 #算术运算 加减乘除 #逻辑运 ...

  4. windows下eclipse远程连接hadoop集群开发mapreduce

    转载请注明出处,谢谢 2017-10-22 17:14:09  之前都是用python开发maprduce程序的,今天试了在windows下通过eclipse java开发,在开发前先搭建开发环境.在 ...

  5. 19.Longest Substring Without Repeating Characters(长度最长的不重复子串)

    Level:   Medium 题目描述: Given a string, find the length of the longest substring without repeating cha ...

  6. git 日常使用从入门到真香

    目录 git 日常使用从入门到真香 一.Git简介 二.Git常用命令 三.git操作流程 四.报错处理 git 日常使用从入门到真香 一.Git简介 Git是一个开源的分布式版本控制系统,可以有效. ...

  7. ubuntu 16 64位编译安装php

    ./configure \ --prefix=/usr/local/php7 \ --exec-prefix=/usr/local/php7 \ --with-config-file-path=/us ...

  8. 【笔记】MySQL的基础学习

    [笔记]MySQL的基础学习 老男孩 MySQL  一 安装与配置 1 下载安装 官网:http://dev.mysql.com/downloads/mysql/ 下载相应版本的压缩包 解压压缩包至任 ...

  9. 江西财经大学第一届程序设计竞赛 A

    链接:https://www.nowcoder.com/acm/contest/115/A来源:牛客网 题目描述 "挤需体验五番钟,里造会挨上这款游戏!" 怎么可能嘛!当我是傻子吗 ...

  10. asp.net mvc AjaxHelper 获取 JSON 的方法

    默认的 AjaxHelper 没有提供获取 JSON 的方法,只提供获取 html 然后更新指定元素的方法,不过,经测试发现还是有办法的,由于 AjaxOptions 对象的 OnSuccess 属性 ...