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 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
随机推荐
- 浅谈PHP面向对象编程(四、类常量和静态成员)
4.0 类常量和静态成员 通过上几篇博客我们了解到,类在实例化对象时,该对象中的成员只被当前对象所有.如果希望在类中定义的成员被所有实例共享. 此时可以使用类常量或静态成员来实现,接下来将针对类常量和 ...
- EntityFramework 更新数据库字段的三种方法
例: 实体类: public class TestDbContext : DbContext { public DbSet<Test> Tests { get; set; } public ...
- Mysql--产品支持的平台
- Nim游戏变种——取纽扣谁先取完
(2017腾讯实习生校招笔试题)Calvin和David正在玩取纽扣游戏,桌上一共有16个纽扣,两人轮流来取纽扣,每人每次可以选择取1个或3个或6个(不允许不取),谁取完最后的纽扣谁赢.Cavin和D ...
- delphi IOS BLE 代理
代理方法 centralManagerDidUpdateState: peripheralManagerDidUpdateState:代理方法. centralManager:willRestoreS ...
- Delphi IOS MusicPlayer 锁屏运行学习
[weak] FMusicPlayer: TMusicPlayer; [weak]修饰, 编译器在处理这个变量的时候不会调用该变量内容的__ObjAddRef和__ObjRelease., proce ...
- Linux虚机密码破解
1 重启机器,在机器读秒时按回车键 2 选择要启动的操作系统按 e 3 选择kernel所在行按 e 4 末尾输入空格 single 5 敲回车 在按 b 系统将进入单用户模式 然后 可以 通过 p ...
- swarmkit test
swarmd -d /tmp/node-1 --listen-control-api /tmp/node-1/swarm.sock --hostname mhc --engine-addr=tcp:/ ...
- centos7 安装wxPython
*** exact error that occured. This usually means GTK+ is incorrectly installed. configure: error: ...
- go unit test-monkey
package main import ( "fmt" "github.com/bouk/monkey" "os" "os/exe ...