文本垂直居中对齐是一个很常见的问题,这里总结一下。

  一、容器高度固定,单行文本垂直居中对齐

height:20px;
line-height:20px;
overflow:hidden;

  二、容器高度固定,多行文本垂直居中对齐

padding-top:10px;
padding-bottom:10px;
line-height:20px;

  三、容器高度自适,单行/多行文本垂直居中对齐

.targetList dl dt div {
width:265px;
height:50px;
display:table-cell;
vertical-align:middle;

}
.targetList dl dt strong {
text-decoration:none;
font-size:16px;
line-height:16px;
color:#177bb0;
font-weight:bold;
vertical-align:middle;

}

  先这样。

CSS 文本垂直居中对齐的更多相关文章

  1. html文本垂直居中对齐

    html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...

  2. css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  3. css文本垂直居中的实现

    本案例已经有新的比较简便的解决方案,可以直接采用 vertical-align:middle 样式对行内元素进行垂直居中布局,详见: 微信小程序开发——如何让商品标题类文本根据内容长度垂直居中. 以下 ...

  4. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  5. css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  6. css文本垂直居中

    1,一般flexca 2,行高 3,行高加边框或者透明边框

  7. CSS文本垂直居中显示

    <style> .sty1 { width: 300px; height: 200px; background-color: black; text-align: center; colo ...

  8. div中字垂直居中对齐

    div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

  9. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...

随机推荐

  1. 同余定理简单应用 - poj2769 - hdu 1021 - hdu 2035

    同余问题 基本定理: 若a,b,c,d是整数,m是正整数, a = b(mod m), c = d(mod m) a+c = b+c(mod m) ac = bc(mod m) ax+cy = bx+ ...

  2. LIS学习笔记(两种算法)O(n^2) 和 O(nlogn)

    2017-09-02 10:34:21 writer:pprp 最长上升子序列,具体分析看代码:O(n^2)的做法,dp的思想 分析:每次读一个进行扫描,如果当前读入的这个要比之前的大, 说明有可能加 ...

  3. nodejs request-promise 请求返回中文乱码

    nodejs request-promise 请求返回中文乱码 解决方法: 具体步骤如下: 1. 引用iconv-lite 进行转码. 2. 请求时要写参数:encoding:null 3. 对bod ...

  4. Mysql修改表结构详解

    添加字段: alter table `user_movement_log`Add column GatewayId int not null default 0 AFTER `Regionid` (在 ...

  5. js中中括号,大括号使用详解

    js中中括号,大括号使用详解 一.总结 一句话总结:{ } 是一个对象,[ ] 是一个数组 1.js大括号{}表示什么意思? 对象 { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或 ...

  6. spring mvc:内部资源视图解析器(注解实现)@Controller/@RequestMapping

    spring mvc:内部资源视图解析器(注解实现)@Controller/@RequestMapping 项目访问地址: http://localhost:8080/guga2/hello/prin ...

  7. 项目使用文档管理:MediaWiki安装及使用入门

    MediaWiki是著名的开源wiki引擎,全球最大的wiki项目维基百科(百科词条协作系统)是使用MediaWiki的成功范例,MediaWiki的最大作用在于对知识的归档,可用于构建企业/个人知识 ...

  8. Kotlin------函数和代码注释

    定义函数 Kotlin定义一个函数的风格大致如下 访问控制符 fun 方法名(参数,参数,参数) : 返回值类型{ ... ... } 访问控制符:与Java有点差异,Kotlin的访问范围从大到小分 ...

  9. Codeforces Round #202 (Div. 2)

    第一题水题但是wa了一发,排队记录下收到的25,50,100,看能不能找零,要注意100可以找25*3 复杂度O(n) 第二题贪心,先找出最小的花费,然后就能得出最长的位数,然后循环对每个位上的数看能 ...

  10. Java 里的异常(Exception)详解

    作为一位初学者, 本屌也没有能力对异常谈得很深入.   只不过Java里关于Exception的东西实在是很多. 所以这篇文章很长就是了.. 一, 什么是java里的异常   由于java是c\c++ ...