CSS实现居中代码大全
1、单行垂直居中
文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
2、层水平居中
设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}
3、层中的文字水平居中
在childdiv的css加上text-align:center;
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}
4、div层垂直居中
<div style=" background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style=" background:red;position:static;position:absolute9; top: 50%;">
<div style=" background:blue;position: relative; top: -50%;">
</div>
</div>
</div>
</div>
5、div层垂直水平居中，英文超长换行
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute9; top: 50%;">
<div style="position: relative; top: -50%; text-align: center;">
<div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
</div>
</div>
</div>
</div>
</div>
6、div垂直滚动
<div style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">http://www.51xuedeiannao.com </div>
7、垂直居中和使用text-align水平居中
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute9;top: 50%;">
<div style="position: relative; top: -50%; text-align:center;">
<div style="width: 275px;">
<div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
</div>
</div>
</div>
</div>
</div>
</div>
8、垂直居中和使用margin水平居中
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute9; top: 50%;">
<div style="position: relative; top: -50%; ">
<div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
</div>
</div>
</div>
</div>
</div>
CSS实现居中代码大全相关推荐
- php网页图片中间代码,图片 css div居中代码怎么写
图片css div居中代码的写法:首先将display设置成table-cell:然后水平居中设置text-align为center:最后将垂直居中设置vertical-align为middle即可. ...
- 让图片居中php代码怎么写,CSS图片居中代码怎么写
为了让网站页页美观效果更好,让图片居中应该怎么做呢?css图片居中代码怎么写呢?在这里为大家分享css如何让img图片居中,并附上代码. CSS图片居中方法一:利用display的table-cell ...
- css字体样式代码大全_这都2020年了，还没了解CSS？
对于新人来说想要了解css,就要从最基本的入手了解,讲真的学习css入门很简单,学习html和css短时间后你就可以制作一个网页,深入的去学习的话,就会很难.他就是从简--深--深--简的一个过程,如 ...
- CSS样式居中代码小结
1.text-align: center 2.<center> <img src="av.gif" /> </center> ...
- css代码大全，方便保存
css属性代码大全 一 CSS文字属性: color : #999999; /*文字颜色 */ font-family : 宋体 ,sans-serif; /*文字字体 / font-size : 9 ...
- css常用代码大全,html+css代码
css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置 1.font-size: 字号参数 2.font-style: 字 ...
- 金色css颜色代码大全,CSS颜色代码大全
标签:CSS颜色代码大全 颜色代码表(一): EEEEEE FFCCFF FF66FF FF00FF DDDDDD FFCCCC FF66CC FF00CC CCCCCC FFCC99 FF6699 ...
- php div 居中代码,用CSS实现DIV水平居中显示
div用css设置居中的方法:首先对body设置"text-align:center":然后对需要居中的div盒子设置css样式为"margin:0 auto" ...
- html5 div居中样式,div css 居中有哪些形式与居中代码
div css 居中有哪些模式与居中代码 在HTML组织中会碰到各种千般居中名目配置,比方内容居中(水准居中).内容垂直居中.组织居中等常见CSS居中需要设置,这里CSS5介绍种种居中实例与居中代码. ...
最新文章
- 微服务架构 — Overview
- 基于C#局域网语音聊天
- SAP支持服务的QA
- P4331-[BalticOI2004]Sequence数字序列【左偏树】
- 【转】Mac本地生成SSH Key 的方法
- 如何安装tensorflowGPU环境搭建（不报AVX2的警告）
- 阿联酋esma认证怎么做_百度爱采购企业认证是怎么做的？这些你要知道！
- 无心剑中译奥修《奥修对爱与婚姻的印象》
- 搭建SSM框架的配置文件
- java语言的运行平台，威力加强版
- Python基础知识点回顾
- ACM比赛中如何加速c++的输入输出
- 苹果Mac延时摄影视频制作工具:Persecond
- Faiss：Facebook开源的相似性搜索类库
- matlab读入三维点云数据斯坦福兔子
- AutoCAD颜色索引表与RGB颜色的对照表
- ci框架 反向代理配置_通过 nginx-proxy 实现自动反向代理和 HTTPS
- springboot 2.x学习实践 ＜一＞
- win10桌面图标有个白板,怎么去掉
- TensorRT教程18：使用DLA（深学习加速器）