CSS 实现等高布局以及多行文本垂直居中
将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>
上面看出三个方块已经垂直居中了
CSS 实现等高布局以及多行文本垂直居中的更多相关文章
- 如何用css实现"等高布局"。
有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- 【CSS】等高布局
1. 负margin: margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果. ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 关于css解决俩边等高的问题(等高布局)
等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- CSS等高布局的6种方式
× 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
随机推荐
- spring boot + slf4j + log4j配置
https://docs.spring.io/spring-boot/docs/1.5.6.RELEASE/reference/htmlsingle/#boot-features-logging ht ...
- 在VritualBox中安装CentOS7
系统:Windows10 位 详细步骤参考: Windows平台上通过VirtualBox安装centos虚拟机 安装virtual box 出现2503错误解决:c:/windows/temp 添加 ...
- 十年Java架构师分享
看到一篇十年java架构师分享需要掌握的技术点,有时间对照一下,好好学习一下. ------------------------------------------------------------ ...
- Network Real Trace Analysis 2015年12月10日
了解网络中真实的流量,国内很难找到巨人的肩膀. WAND是新西兰waikato 大学计算机系的研究小组,主要做网络测量,大规模网络流量捕获,网络分析.还做专业的分析软件. libtrace是其开源的分 ...
- objective c to pas
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIApplicationDelegate_Protocol ...
- 汉字转拼音开源工具包Jpinyin介绍
最近要实现一个根据词语得到词语对应拼音的功能,找到了Jpinyin这个开源工具包,使用下来发现它非常强大,完全满足我的需求,下面对它做一个简单的介绍,希望能够帮助到有需要的朋友. https://gi ...
- WPF 绑定以基础数据类型为集合的无字段名的数据源
WPF 绑定以基础数据类型为集合的无字段名的数据源 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-21 我们在控件的数据绑定 ...
- Qt(自适应窗口)
关于窗口布局: 默认控件的大小为最小尺寸: 如果此时右键设置布局时,窗口大小会自动缩放对应大小,不利于调整. 建议窗口控件设置好最小尺寸,便于窗口布局时,控件不会变形,例如: 改变minimumsiz ...
- Android 定时重复启动弹出窗口。
本来想着用handlerpostdelay就可以实现,没想到演示后关闭应用居然报错. 后来想到是没有了activity. ((Activity)context).isFinishing() 可以传入c ...
- css实现栅格的方法
1. 方法一 1.1. 效果 2. 方法二 2.1. 效果 3. 代码 3.1. Html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...