将display属性设置为table-cell,具有table的特点。

1.同行等高。

2.宽度自动调节。

相当于表格是td,

<style type="text/css">
.classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}
.classtd{display:table-cell; border-color:#cc0;}
</style>
<div class="classtd"><p>大人。<br />好好学习天天向上 做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务</p> </div> <div class="classtd"><p>我和左边等高
我和左边我
和左边等高等
高我和左边等高</p></div>

  

大人。
好好学习天天向上 做好技术,做好产品为人民服务
做好技术,做好产品为人民服务
做好技术,做好产品为人民服务
做好技术,做好产品为人民服务

我和左边我
和左边等高等
高我和左边等高

如果要实现垂直居中的话 可以与 vertical-align:middle结合使用即可

<style type="text/css">
.classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}
.classtd div{ display: inline-block; vertical-align: middle;}
</style>
<div class="classtd">
<div style="width:100px;background: #639146; color:#fff;">垂直居中fsdfsd</div>
<div style="width:100px;background: #2B82EE; color:#fff;">垂直居中qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div>
<div style="width:100px;background: #F57900; color:#fff;">垂直居中qqqqqqqqqqq</div> <div style="width:100px;background: #BC1D49; color:#fff;">处置居中qqqqqqqqqqqq</div> </div>

垂直居中fsdfsd
垂直居中qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
垂直居中qqqqqqqqqqq
处置居中qqqqqqqqqqqq

上面看出三个方块已经垂直居中了

CSS 实现等高布局以及多行文本垂直居中的更多相关文章

  1. 如何用css实现"等高布局"。

    有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...

  2. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  3. 【CSS】等高布局

    1. 负margin:   margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果.   ...

  4. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  5. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  6. 关于css解决俩边等高的问题(等高布局)

    等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...

  7. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  8. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  9. CSS等高布局的6种方式

    × 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...

随机推荐

  1. 11g的新特性:SQL Plan Management(SPM)

    Oracle11g中,Oracle提供dbms_spm包来管理SQL Plan,SPM是一个预防机制,它记录并评估sql的执行计划,将已知的高效的sql执行计划建立为SQL Plan Baseline ...

  2. linux加程序是否当掉检测脚本

    cd $(dirname $) source ~/.bash_profile SYSTEM_TIME=`date '+%Y-%m-%d %T'` count=`ps -ef |grep "p ...

  3. 脱壳系列(二) - EZIP 壳

    程序: 运行程序 用 PEiD 查壳 EZIP 1.0 用 OD 打开 按 F8 往下走 这个看似是 OEP 的地方却不是 OEP 因为代码段从 00401000 开始 可以看到,壳伪造了 3 个区段 ...

  4. 第二章:Android Studio概述(一)[学习Android Studio汉化教程]

     Android Studio是一个视窗化的开发环境.为了充分利用有限的屏幕空间,不让你束手束脚,Android Studio 在特定的时间仅仅显示一小部分可用窗口. 除了一些上下文敏感的窗口和上下文 ...

  5. Django xadmin的使用 (一)

    Django  xadmin的使用 xadmin是django的一个第三方的管理后台实现,它的功能比自带的admin功能更加强大. xadmin项目在github上的地址为:https://githu ...

  6. centOS安装openoffice的方法

    centOS安装openoffice的方法 分类: centOS 2012-06-15 10:24 2872人阅读 评论(0) 收藏 举报 centos测试 yum install openoffic ...

  7. 使用avalon 实现一个序列号功能

    avalon"操作数据即操作DOM"的能力,让我们可以专致于业务,写出更专业,更优雅,更易维护的代码来.现在让我们看看如何实现一个序列号输入功能.它的需求以下: 每输入4个字符就跳 ...

  8. iOS设计模式(01):观察者

    iOS设计模式(01):观察者 iOS-Observer-Pattern 什么是观察者模式 什么是观察者模式?你曾经订阅过报纸吗?在订阅报纸的时候,你不用去任何地方,只需要将你的个人地址信息以及订阅信 ...

  9. 使用JavaScript弹出Confirm对话框

    方法1: 这个比较简单,一句话: <a href="error.htm" onclick="javascript:return confirm('are you s ...

  10. sqlserver里常用的语法

    bb 为nvarchar(50)CAST(bb AS int) select MAX(CAST(bb AS int)) from AAA