CSS:居中放置页面元素
来源:互联网 发布:二阶转置矩阵公式 编辑:程序博客网 时间:2024/05/16 16:06
最近入了前端的坑,啊,改学前端了,长路漫漫.....
块级元素文字居中放置:
1.使用text-align性质可以居中显示块级元素中的文字
h1{text-align: center;}
2.设置包含文字容器的margin值:
把margin-left和margin-right设为auto时,该元素则会相对于父元素居中显示,注意,需设置元素h1的width属性,否则元素h1实际上占据了body元素的整个宽度,即使设置margin也并不会看到居中的效果
h1{width: 400px;margin:0 auto;background:#666;color: #fff;}
表格居中放置
对表格使用text-align只能是使得表格单元格中的文本居中,并不能使整个表格位于页面居中位置
table{width: 50%;margin: 0 auto;text-align: left;}
图片居中放置
水平
1.在img元素外包装一个div标签,使其成为块级元素
<div class="flagicon"><img src="../img/5.jpg" alt="The Hole" height="400px" width="400px" /></div>
CSS规则如下:
.flagicon{text-align: center;}
2.不包装div标签,把父元素body的padding-left属性值设置为50%,然后取需要居中元素的宽度值一半,将该值取负赋给margin-left属性
body{padding-left: 50%;}img{margin-left: -200px;}3.改变margin和display属性
.blocking{display: block;margin: 0 auto;}
<img src="../img/6.jpg" alt="The X" class="blocking" />
垂直:
1.使用position属性
img{position: absolute;top: 50%;left: 50%;width: 600px;height: 400px;margin-left: -300px;margin-top: -200px;}
2.文字和图片(包括多张图片)都居中显示,就需要把所有内容放在一个div元素中
<div id="centerFrame"><p>Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.</p><img src="../img/7.jpg" alt="The Summer" width="450px" height="400px" /></div>
#centerFrame{width: 450px;position: absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -225px;}
阅读全文
0 0
- CSS:居中放置页面元素
- css元素水平放置
- 页面元素居中 css获取页面中心位置
- 不用table,两种div+css页面元素居中方法
- CSS控制元素的在页面中水平、垂直居中
- CSS:如何让元素在页面中水平垂直居中?
- CSS关于元素居中
- CSS元素居中
- Css元素居中设置
- css定宽块级元素居中
- 关于css元素居中
- html,css元素居中
- CSS 元素垂直居中
- CSS元素居中指南
- css 元素居中
- css元素垂直居中
- css元素水平居中
- CSS居中元素
- 关于druid数据连接池抛出的 connection holder is null 异常
- hibernate学习之一级缓存
- oracle sql case语句简单使用
- 面对对象三大特性—封装
- 常见正则表达式
- CSS:居中放置页面元素
- MYSQL中表的拷贝
- Android Okhttp浅析
- 38、39、40
- MVC使用Gantt Chart实现甘特图,管理事情进度(借鉴)
- SQLのT_SQL
- spring(基础10) 注解@Value详解
- SpringMVC学习笔记(二)——SpringMVC开发环境搭建
- js初识,博客初识