设置 text-align: center;line-height:height 居中无效
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 居中无效的更多相关文章
- 解决html设置height:100%无效的问题
通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...
- CSS设置height为100%无效的情况
CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...
- 火狐中,设置align="center"失效的解决方法
如下: <img align="center" style="vertical-align:top"></img> 只需要加上: ver ...
- ComboBox设置Text属性
WPF ComboBox 控件设置 Text属性时 必须将 IsEditable="true" 才能显示
- winform中的ComboBox同时设置text和value的方法
winform中的ComboBox不能像webform中的dropdownlist控件一样,在属性中可以同时设置text和value值,可以通过编写一个新类来实现这个功能. 1.首先在form1中添加 ...
- 【高德地图API】SDK v1.1.1 在代码中设置Map中心点Center级别不起作用
有时候你在初始化地图时不是直接在xaml中设置Map的Center,而是在cs代码中设置Center或者设置SetZoomAndCenter改变中心点和缩放级别.你可能会发现,不起作用. 这边提出的解 ...
- bootstrap的Alerts中 可以放置p标签 设置 align="center" 用来设置文本居中
效果
- 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对象) ...
- chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container"> <div class="item"> <div class="ite ...
随机推荐
- springboot junit单元测试报错
1.测试类中如下方框为主函数 2.application.yml注意如下2个地方 3.主函数
- 状压DP 【洛谷P3694】 邦邦的大合唱站队
[洛谷P3694] 邦邦的大合唱站队 题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶 ...
- kuangbin专题十六 KMP&&扩展KMP HDU2328 Corporate Identity
Beside other services, ACM helps companies to clearly state their “corporate identity”, which includ ...
- opencv-图片合成视频
无论视频的合成还是分解我们都需要进行解码器或者是编码器(因为视频不是一帧一帧进行存储的,而是进行过压缩编码.) import cv2 img = cv2.imread('image1.jpg') im ...
- SprimgMVC学习笔记(八)—— SpringMVC与前台json数据交互
一.两种交互形式 可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在Controller类中会有不同的解析, ...
- freemarker macro 使用
转载... macro, nested, return语法 <#macro name param1 param2 ... paramN>...<#nested loopvar1, l ...
- poj3728之离线LCA+dp思想/RMQ+LCA(非常好的题目)
题意很简单 给一个树(n < 5w) 每个点有个权值,代表商品价格 若干个询问(5w) 对每个询问,问的是从u点走到v点(简单路径),商人在这个路径中的某点买入商品,然后在某点再卖出商品, ...
- 批处理中setlocal enabledelayedexpansion的含义
setlocal enabledelayedexpansion 延迟变量全称"延迟环境变量扩展",要理解这个东西,我们还得先理解一下什么叫扩展! CMD在解 ...
- flink日记
直接下载 解压, 运行 ./bin/start-cluster.sh 几个概念: 批处理: 大数据量,不要求实时. 输入源是有界的 流处理:实时要求高,通常在毫秒级, 数据量比较小,但是输入源是无界的 ...
- 如何 将下载离线 nupkg 文件 安装到VS2017
https://www.cnblogs.com/cncc/articles/8276878.html --------------------------------------------- ...