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

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. msys2 设置home路径为windows用户路径

    1配置/etc/nsswitch.conf db_home: windows 2(可不配)增加windows环境变量HOME为%USERPROFILE% 3(可不配)ssh默认仍使用msys中的hom ...

  2. RocketMQ的客户端连接数调查

    RocketMQ版本:3.4.6 ==问题现象== RocketMQ集群的某个topic,在一部分节点上消费有“断层”,这部分数据一致没办法消费. ==调查过程== 一顿操作猛如虎的调查之后发现, 该 ...

  3. 2014.1.14 struts 的default.properties 配置文件详述

    转自  http://justsee.iteye.com/blog/723993 Struts 2框架有两个核心配置文件:struts.xml和struts.properties 其中struts.x ...

  4. ORACLE 查看分区表分区大小

    SELECT *  FROM dba_segments t WHERE t.segment_name ='table_name'; pratition_name : 分区名 bytes : 分区大小( ...

  5. DevExpress gridcontrol Master-Detail绑定到对象类型

    数据库:C_ProductPlan ,C_ProductPlanItemDTO定义:(实现每个计划条目-Master,对应多个ProcessInfo-Detail) [DataContract] [S ...

  6. 文件权限命令 linux

    chmod 777 文件名/文件夹名         拥有所有权限 http://www_xpc8_com/ chmod 755 文件名/文件夹名         属主有所有权限,群组和其他有读.执行 ...

  7. qmake -简介

    qmake 简化了在不同平台下开发项目时构建处理的过程. qmake 自动产生Makefiles文件,只需要几行信息来构建每个Makefile.qmake可以被用于任何软件项目,不管是否使用Qt. q ...

  8. 代码自动生成工具MyGeneration之一

    前段时间用C#做网站,用到了大量数据库相关的东西.网站采用3层结构,即数据访问层(Data Access Layer),业务逻辑层(Business Logic Layer),页面表现层().做了一段 ...

  9. day08(异常处理，创建异常，finally，throws和throw的区别)

    异常处理, 异常的产生  运行时异常:程序运行中产生的异常:RuntimeException类.   编译时异常:程序在编译时产生的异常:除了RuntimeException类  其他都是编译时产生的 ...

  10. MathJax $TeX$ Test Page

    MathJax TeX Test Page When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are ...