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

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. hibernate4 ， spring3 使用 org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean 报错 Implementing class

    错误代码如下 Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with ...

  2. springmvc 整合数据验证框架 jsr

    1.maven <dependency> <groupId>javax.validation</groupId> <artifactId>validat ...

  3. "我们分手吧。"女的对男的说。 "为什么呢？亲爱的，你不要我了么？" "因为你幼稚。"女的坚定地语气回答道，然后转身准备走。 男的上前踩住女的影子，然后说...

    1."我们分手吧."女的对男的说. "为什么呢?亲爱的,你不要我了么?" "因为你幼稚."女的坚定地语气回答道,然后转身准备走. 男的上前踩 ...

  4. Django入门指南-第8章：第一个测试用例（完结）

    python manage.py test python manage.py test --verbosity=2 # boards/tests.py from django.core.urlreso ...

  5. SPATIALINDEX_LIBRARY Cmake

    https://libspatialindex.org/ QGIS:https://github.com/qgis/QGIS/blob/master/cmake/FindSpatialindex.cm ...

  6. Ubuntu安装教程(双系统)

    经常要重装还不如写个安装教程省的每次都要查 Ubuntu安装教程: win7下安装Linux实现双系统全攻略:https://jingyan.baidu.com/article/c275f6bacc3 ...

  7. 2013多校联合3 G The Unsolvable Problem（hdu 4627）

    2013-07-30 20:35 388人阅读 评论(0) 收藏 举报 http://acm.hdu.edu.cn/showproblem.php?pid=4627 The Unsolvable Pr ...

  8. poj3321-Apple Tree（DFS序+树状数组）

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 36442   Accepted: 10894 Desc ...

  9. event 自定义事件

    自定义事件 1 public class Program 2 { 3 public event EventHandler ehdl=null; 4 public Program() 5 { 6 ehd ...

  10. pageadmin CMS网站制作教程：栏目单页内容如何修改

    pageadmin CMS网站制作教程:栏目单页内容如何修改 一般情况下,如公司介绍,联系方式等介绍内页面都属于单页,单页内容可以直接在栏目设置界面进行修改,如下 1.对栏目单页内容进行设置,登录后台 ...