项目中要实现的效果如图：

html代码 及 css代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box {

                display: inline-block;

                width: 200px;

                height: 68px;

                line-height: 68px;

                border: 1px solid #ddd;

                vertical-align: top;

                padding: 0 20px;

            }

            h5 {

                display: inline-block;

                line-height: 28px;

                vertical-align: middle;

                margin: 0;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <h5>标题</h5>

        </div>

        <div class="box">

            <h5>标题标题标题标题标题标题标题标题标题</h5>

        </div>

    </body>

</html>

上面代码最终实现的效果比较粗糙：

纯css实现不固定行数的文本在一个容器内垂直居中的更多相关文章

  1. 【css】多行文字图片混排容器内垂直居中解决方案

    css:   .box-wrap{display:table;width:200px;height:200px;*position:relative;}/*最外边的容器,需固定宽高*/ .box-ha ...

  2. css3实现超出文本指定行数(指定文本长度)用省略号代替

    测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  3. Grid++Report设置显示固定行数

    一.要实现的功能打印的报表显示固定的行数,并且设置字段的文字可以自动换行二.设置步骤1.鼠标左键单击“明细网格”栏,在右侧属性窗口中设置“追加空白行”属性值为:是:“追加空白行在后”属性值为:是.2. ...

  4. EditText 几种显示方式，固定行数，自适应行数

    1.显示7行,超过7行自动向下补充行数 <EditText android:id="@+id/edt_content" android:layout_width=" ...

  5. Android TextView,EditText要求固定行数自动调整TextSize

    最近项目有个需求要求文本最多显示3行,继续输入则字体变小,删除已经输入的文字,那么字体变大,不管变大变小都不能超过3行.网上怎么找也找不到相关的解决方案,自己动手,丰衣足食了! 说一下算法思路,后面给 ...

  6. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

  7. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  8. FastReport之实现打印固定行数，不足补打空白行的办法

    在设置单据的打印模板的时候,我们有时候会遇到这样的情况:单据的内容很少,打印出来的效果不理想的情况,例如1.单据体与单尾之间有大量的空白: 2.单据体跟单尾连在一起,单尾后面的空白篇幅太大: 以上这两 ...

  9. 纯css控制文字2行显示多余部分隐藏

    在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

随机推荐

  1. 客户端、服务器端中JSON字符串与对象的转换

    客户端: 字符串转为对象:$.parseJSON(json); 对象转为字符串:JSON.stringify(_pasteDataItem) 服务器端(c#): 对象: [DataContract(N ...

  2. 协议 protocol

    协议声明类需要实现的的方法,为不同的类提供公用方法,一个类可以有多个协议,但只能有一个父类,即单继承.它类似java中的接口. 正式协议(formal protocol)--------------- ...

  3. cucumber安装可能发生的错误

    1.--ignore-certification-errors 解决:可能是你的chromedriver版本与ruby版本不匹配,换一个版本 2.找不到文件,certification verify ...

  4. C++/C头文件 .h和 .c

    在C语言家族程序中,头文件被大量使用.一般而言,每个C++/C程序通常由头文件(header files)和定义文件(definition files)组成.头文件作为一种包含功能函数.数据接口声明的 ...

  5. verilog基础--altera培训

    参数化 Localparam :与prameter一样,但不能被重写. Verilog-2001 格式, module mult_acc #(parameter size = 8 ) (...); 数 ...

  6. day8 异常处理

    异常和错误 part1:程序中难免出现错误,而错误分成两种 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) 2.逻辑错误(逻辑错误) part2:什么是异常 ...

  7. Robotframework-Appium 之常用API（二）

    续接上一文,更多API详细如下: 注:更多官方详情信息见 http://robotframework.org/robotframework/ 28. Name: Install App Source: ...

  8. hdu 2845 Beans 2016-09-12 17:17 23人阅读 评论(0) 收藏

    Beans Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  9. hdu 4995 离线处理+模拟

    http://acm.hdu.edu.cn/showproblem.php?pid=4995 给定一维坐标下的n个点,以及每个点的权值,有m次查询,每次将查询的x点上的权值修改为离x最近的k个点权值的 ...

  10. 网页程序 vs 桌面程序

    网页程序 vs 桌面程序 阅读:  评论:  作者:Rybby  日期:  来源:rybby.com 所谓的网页程序就是指以网页作为程序的操作界面,通过脚本语言“javascript”或其它客户端语言 ...