博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS学习--布局
阅读量:6706 次
发布时间:2019-06-25

本文共 650 字,大约阅读时间需要 2 分钟。

1、 文字的水平居中

将一段文字置于容器的水平中点,只要设置text-align属性即可:

text-align:center;复制代码

2、容器的水平居中

先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。

div#container { width:760px; margin:0 auto; }复制代码

3、文字的垂直居中

a.对于单行文本,我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可:

b.多行文本垂直居中 多行文本垂直居中分为两种情况,一个是父级元素高度不固定,随着内容变化;另一个是父级元素高度固定。

1)父级元素高度不固定

父级高度不固定的时,高度只能通过内部文本来撑开。这样,我们可以通过设置内填充(padding)的值来使文本看起来垂直居中,只需设置padding-top和padding-bottom的值相等:

2)父级元素高度固定

我们可以设置父级div的display属性:display: table;;然后再添加一个div包含文本内容,设置其display:table-cell;和vertical-align:middle;。具体代码如下:

4、div垂直居中,利用绝对布局absolute

5、div左右布局

在子元素上加float:left; 在父元素上加clearfix

6、div左中右布局

转载于:https://juejin.im/post/5b2643866fb9a00e9c47cf69

你可能感兴趣的文章
Ubuntu 16.04 - python3 安装mysql驱动
查看>>
f1 f12热键关闭
查看>>
ASP.NET Core 2.0 : 九.从Windows发布到CentOS的跨平台部署
查看>>
Web安全测试-WebScarab
查看>>
IntelliJ IDEA 2018.2激活
查看>>
爬虫基础
查看>>
HDU 6073 Matching In Multiplication —— 2017 Multi-University Training 4
查看>>
struts2 添加请求后缀的3种方式
查看>>
赋予管理员操作系统文件的权限
查看>>
一些常用接口地址
查看>>
DELPHI版传奇引擎学习菜鸟篇(applem2)-05
查看>>
集合框架中,引用数据类型对象集合的构建,易错点分析
查看>>
oracle 学习随笔一: 字段大小写
查看>>
2014华为机试之字符压缩字符过滤字符串加减法
查看>>
C#开发串口控制程序
查看>>
greenDao 中连接查询
查看>>
LinkedBlockingQueue的put,add跟offer的区别
查看>>
为数字世界和通证经济健康发展保驾护航 币氪产品发布会在蓉举行
查看>>
Spring3.2.9 + JdbcTemplate 学习
查看>>
Vue.js双向绑定的实现原理
查看>>