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

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

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. JDK 中的监控与故障处理工具-02 (jps)

    jps : JVM Process Status Tool jps 命令可以列出正在运行的虚拟机进程, 并显示虚拟机执行的 main class 的名称(main函数所在的类),以及这些进程的本地虚拟 ...

  2. kylin入门到实战:入门

    版权申明:转载请注明出处.文章来源:http://bigdataer.net/?p=292 排版乱?请移步原文获得更好的阅读体验 1.概述 kylin是一款开源的分布式数据分析工具,基于hadoop之 ...

  3. 【Semantic Segmentation】Segmentation综述

    部分转自:https://zhuanlan.zhihu.com/p/37618829 一.语义分割基本介绍 1.1 概念 语义分割(semantic segmentation) : 就是按照" ...

  4. codeforces741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  5. node.js 之 http 架设

    Node.js 安装配置 下载node.js安装mis 打开:cmd cd到node.js安装目录下 输入nodejs --version 显示版本号,证明安装成功 在其根目录下建server.js ...

  6. Lubuntu系统中java,tomcat的环境搭建(virtualbox中)

    一.安装Lubuntu系统 这一步没什么说的,到官网下载镜像,在virtualbox中安装即可安装时就已经可以选择安装源,当然,选中国的设置环装网络,可将该虚拟机设立为网络上的独立IP,和物理机间可以 ...

  7. 可能是最好的 Rx 初学者教程

    译文:https://zhuanlan.zhihu.com/p/25552305 原文:https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

  8. 浏览器检测-js

    昨天有一同学问我为什么attachEvent在非IE浏览器下不能起作用,我也跟他解释了一番:attachEvent是IE下独有的,只能在IE下使用,其他浏览器下应该用addEventListener来 ...

  9. WPF TextBox 获得焦点后,文本框中的文字全选中

    textbox.GotFocus 事件处理 Textbox.SelectAll() 是不行的, 这样处理会发生的情况是: 1) textbox1 当前没有焦点, 内容为 someText. 2) 鼠标 ...

  10. dva-loading使用方法

    1. 下载dva-loading npm install dva-loading --save 2. 导入并使用dva-loading import createLoading from 'dva-l ...