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

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

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. Math.Round 四舍五入问题 解惑 !

    前言: 一定要说 坑爹的微软! 坑爹的微软! 坑爹的微软!  重要的事情说 三遍 ! 摘录 SMDN 示例 下面的示例演示就近舍入. C# C++ VB   Math.Round(3.44, 1); ...

  2. LA 7272 Promotions(dfs)

    https://vjudge.net/problem/UVALive-7272 题意: 公司要提拔人,现在有n个人,现在有m条有向边,A->B表示A的表现比B好,也就是如果B晋升了,那么A肯定会 ...

  3. 数据库的ACID特性详解

    ACID是指在 数据库管理系统(DBMS)中事物所具有的四个特性:原子性.一致性.隔离性.持久性 事物:在数据库系统中,一个事务是指由一系列连续的数据库操作组成的一个完整的逻辑过程.这组操作执行前后, ...

  4. Python实现单链表

    定义链表结构: class ListNode: def __init__(self, x): self.val = x self.next = None 输出该链表l1的元素: while l1: p ...

  5. 关于SpringMVC中两种映射器不能共存的解决

    首先大家都知道SpringMVC有两种映射器: org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping 和 org.spri ...

  6. js实现类名的添加与移除

    方法1:使用className属性: 方法2:使用classList API: //用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)' ...

  7. 蓄水池抽样算法 Reservoir Sampling

    2018-03-05 14:06:40 问题描述:给出一个数据流,这个数据流的长度很大或者未知.并且对该数据流中数据只能访问一次.请写出一个随机选择算法,使得数据流中所有数据被选中的概率相等. 问题求 ...

  8. 17.并发容器之ThreadLocal

    1. ThreadLocal的简介 在多线程编程中通常解决线程安全的问题我们会利用synchronzed或者lock控制线程对临界区资源的同步顺序从而解决线程安全的问题,但是这种加锁的方式会让未获取到 ...

  9. Symmetrical Network Acceleration with EBS 12

    Andy Tremayne, my esteemed colleague and fellow blogger, has published a new whitepaper that discuss ...

  10. MySQLdb和PIL安装

    最近将个人博客部署到树莓派上海真是颇费周折,尤其是在MySQLdb和PIL的安装上 MySQLdb 先说Windows吧(比较简单) 直接pip安装即可或者下载编译版更方便:http://source ...