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. SpringBoot dubbo之class is not visible from class loader

    使用了两个类加载器加载了同一个类,区分一个Class对象是否相等要看包名+类名,也要看是否是同一个类加载器 方案一,排查掉spring-boot-devtools模块的maven引入可以解决,这时候所 ...

  2. 背包DP【洛谷P2113】 看球泡妹子

    P2113 看球泡妹子 题目背景 2014年巴西世界杯开幕了,现在满城皆是世界杯,商家们利用它大赚一笔,小明和小红也借此机会增进感情. 题目描述 本届世界杯共有N支球队,M场比赛.男球迷小明喜欢看比赛 ...

  3. luogu1999 高维正方体

    神仙题 分析法是个好方法 反正xjb分析就分析出来了 首先,i维立方体的点数(0维元素数)为\(2^i\) 首先0维肯定是1(不就是一个点吗) 你想想你是怎么用点拼成线段的 你把两个点往地上一扔 然后 ...

  4. 黑马集合学习 自定义ArrayList01

    package demo; import java.util.Arrays; public class MyArrayList<T> { Object[] t; int size; pri ...

  5. freemarker ! 用法

    ${(user.name)!""} 请注意,是打了()的 也就是它会先判断user是不是为null 在判断user.name 是不是为null

  6. TortoiseGit安装简单介绍和使用

    首先,你必须有会装软件的技能和一个看得懂英语的眼睛.然后保证Git也装好了 他提供了中文版的安装包哦 安装过程尽量选择默认就行,先装上面那个啊,语言包最后装. 语言配置 因为以前装过,所以...路径是 ...

  7. Codeforces Round #305 (Div. 2) B

    Description Mike and some bears are playing a game just for fun. Mike is the judge. All bears except ...

  8. Appium appium 基础之键盘处理

    方法1 AppiumDriver实现了在上述功能,代码如下(java版本) driver.sendKeyEvent(66);方法2 HashMap keycode = new HashMap();ke ...

  9. mybatis mapper问题列表

    id出现两次 2018-11-14 16:15:03.833 DEBUG 41432 --- [           main] c.a.i.o.d.mapper.DatvMapper.insert  ...

  10. netty在rpc MQ中的应用

    https://files.cnblogs.com/files/yszzu/netty-rpc-parent.zip https://github.com/apache/rocketmq/blob/m ...