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

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. spring-boot @Async 的使用、自定义Executor的配置方法

    1. TaskExecutor Spring异步线程池的接口类,其实质是java.util.concurrent.Executor Spring 已经实现的异常线程池: 1. SimpleAsyncT ...

  2. jquery ui中的dialog，官网上经典的例子

    jquery ui中的dialog,官网上经典的例子   jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...

  3. 【Linux】Jenkins配置和使用（二）

    摘要 本章介绍Jenkins的简单使用,关于Jenkins的安装,参照[Linux]Jenkins安装(一) 事例说明:在linux环境下,安装的jenkins,集成svn,tomcat的环境,项目是 ...

  4. Maximum profit of stocks

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...

  5. 2018.09.14 bzoj2982: combination（Lucas定理）

    传送门 貌似就是lucas的板子题啊. 练一练手感觉挺舒服的^_^ 代码: #include<bits/stdc++.h> #define mod 10007 #define ll lon ...

  6. Winfrom 嵌入word、excel实现源码

    效果图: winform中嵌入word的方法有多种:调用API,使用webBroser或使用DSOFRAMER控件: API过于繁琐: webbroser读取小文件还行,大文件就太痛苦了: 所以还是选 ...

  7. 使用系统的CoreLocation定位

    ////  ViewController.m//  LBS////  Created by tonnyhuang on 15/8/28.//  Copyright (c) 2015年 tonnyhua ...

  8. （匹配 最小路径覆盖）Air Raid --hdu --1151

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1151 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  9. _variant_t与其他数据类型的转换

    转自:http://kuaixingdong.blog.hexun.com/29627840_d.html 我们先看看COM所支持的一些类型的基本类: (微软提供,在comdef.h中定义) 在COM ...

  10. Codeforces735B Urbanization 2016-12-13 11:58 114人阅读 评论(0) 收藏

    B. Urbanization time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...