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

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. oracle常用函数速记

    1.截断中文字符串 CREATE OR REPLACE function cn_cutstr(v_str varchar2,v_len number) return varchar2 IS v_i n ...

  2. android 弹出软键盘将底部视图顶起问题

    今天要做一个搜索功能,搜索界面采用AutoCompleteTextView做搜索条,然后下面用listview来显示搜索结果,而我的主界面是在底 部用tab做了一个主界面导航,其中有一个搜索按钮,因为 ...

  3. ipad The data couldn’t be read because it isn’t in the correct format

    原来是land left和land right都勾选的,去掉land left后出现这个问题

  4. 2018.09.22 atcoder Integers on a Tree（构造）

    传送门 先考虑什么时候不合法. 第一是考虑任意两个特殊点的权值的奇偶性是否满足条件. 第二是考虑每个点的取值范围是否合法. 如果上述条件都满足的话就可以随便构造出一组解. 代码: #include&l ...

  5. 2018.08.28 洛谷P3345 [ZJOI2015]幻想乡战略游戏（点分树）

    传送门 题目就是要求维护带权重心. 因此破题的关键点自然就是带权重心的性质. 这时发现直接找带权重心是O(n)的,考虑优化方案. 发现点分树的树高是logn级别的,并且对于以u为根的树,带权重心要么就 ...

  6. QDesktopWidget

    在Qt中提供了QDesktopWidget类,提供屏幕的有关信息. 可以这么作: QDesktopWidget *d=QApplication::desktop(); int width=d-> ...

  7. html 源码 引入样式

    post-title2 示例 sdf post-title 示例

  8. 配置 struts2 时掉进 web.xml 的坑

    这个声明不好用 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN&quo ...

  9. android DDMS中的内存监测工具Heap

    DDMS中自带的Heap工具可以显示出当前堆内存的情况,分配内存.剩余的内存等信息. 首先是进入DDMS,运行应用,在DDMS的左边区域选中应用的包名,然后点击上方的update heap图标. 点击 ...

  10. 树和二叉树在java中

    树代表一种非线性的数据结构,如果一组数组节点之间存在复杂的一对多关联时,程序就可以考虑使用树来保存这组数据了. 线性表.栈和队列都是线性的数据结构,这种数据结构之内的元素只存在一个对一个的关系.存储, ...