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

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

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. [Pytorch]PyTorch使用tensorboardX(转

    文章来源: https://zhuanlan.zhihu.com/p/35675109 https://www.aiuai.cn/aifarm646.html 之前用pytorch是手动记录数据做图, ...

  2. appium 处理滑动的方法

    appium 处理滑动的方法是 swipe(int start-x, int start-y, int end-x, int end-y, int during) - Method in class ...

  3. Uncaught SyntaxError: Unexpected end of input 突然报了这个错

    最后排查:把 return true 注掉好了,接着在打开注释,依然不报错.最后不报错了.0.0 ~~~

  4. 毕业设计总结(1)-canvas画图

    去年6月底完成的毕业设计,到现在也才开始给它做个总结,里面有很多可以学习和借鉴的东西. 我的毕业设计的题目是“一种路径规划算法的改进与设计”,具体的要求可参见下面的表格: 题目 一种路径规划算法的改进 ...

  5. POJ-3659-最小支配集裸题/树形dp

    Cell Phone Network Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7127   Accepted: 254 ...

  6. Hadoop出现 Wrong FS: hdfs://......错误的解决方法

    今天在hadoop项目中出现以下报错:java.lang.IllegalArgumentException: Wrong FS: hdfs://......,expected: file:///... ...

  7. Math Issues

    Oh no, our Math object was "accidently" reset. Can you re-implement some of those function ...

  8. 029——VUE中键盘语义修饰符

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【nynu】 妹妹的工资怎么算(二分)

    题目链接:http://47.93.252.151/problem.php?id=1148 题目描述 <我的妹妹哪有这么可爱!>中的女主叫做高坂桐乃,高坂家的幺女,外表出众.成绩优秀.运动 ...

  10. Shell脚本编写规范

    shell脚本需要有较高的实用性.可维护.可阅读.方便他人阅读,因而需要建立一定的规范来操作 dream361@master:~$ cat test2.sh #!/bin/bash 所使用的bash程 ...