css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!!
html部分
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #289c97 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #4f5d66; min-height: 27.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="box">
<div id="son"> </div>
</div>
</body>
</html>
css部分
第一种(是个程序员就认识的):
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #289c97 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #4a8a01 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #060606 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #999ea5 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #2b7ec3 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #000000 }
span.s6 { color: #929151 }
span.s7 { color: #060606 }
span.s8 { color: #ad42ef }
span.s9 { color: #4a8a01 }
span.s10 { color: #698906 }
span.Apple-tab-span { white-space: pre }
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
width: 200px;
height: 200px;
background: red;
}
#son{
width: 100px;
height: 100px;
background: green;
margin: 50px; /*算好尺寸设置(最蠢也是最简单的)*/
}
</style>
第二种:
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #289c97 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #4a8a01 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #060606 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #2b7ec3 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #000000 }
span.s6 { color: #929151 }
span.s7 { color: #060606 }
span.s8 { color: #ad42ef }
span.s9 { color: #4a8a01 }
span.s10 { color: #698906 }
span.s11 { color: #d16400 }
span.Apple-tab-span { white-space: pre }
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
width: 200px;
height: 200px;
background: red;
position: relative;
}
#son{
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
第三种:
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #289c97 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #4a8a01 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #d74200 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #060606 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #929151 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #000000 }
span.s6 { color: #929151 }
span.s7 { color: #060606 }
span.s8 { color: #ad42ef }
span.s9 { color: #d16400 }
span.s10 { color: #4a8a01 }
span.s11 { color: #698906 }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
float: left;
position: relative;
left: 50%;
}
p{
float: left;
position: relative;
right: 50%;
}
</style>
</head>
<body>
<div id="box">
<p>我是浮动的</p>
<p>我也是居中的</p>
</div>
</body>
</html>
以上几种是在工作中遇到的几种居中情况,欢迎大家补充!!!
css中关于居中的问题的更多相关文章
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结 第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
- css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- CSS中各种居中的问题
1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
随机推荐
- CentOS系统中基于Apache+php+mysql的许愿墙网站的搭建
1.首先,我们需要两台虚拟机(CentOS7,Linux文本). 2.给两台虚拟机配置网络环境分别为桥接模式 CentOS7 ip为192.168.100.139.24,linux文本ip为192.1 ...
- iOS动画效果和实现
动画效果提供了状态或页面转换时流畅的用户体验,在iOS系统中,咱们不需要自己编写绘制动画的代码,Core Animation提供了丰富的api来实现你需要的动画效果. UIKit只用UIView来展示 ...
- Date、Calender类及日期和字符串转换
Calendar是一个抽象类,抽象类java.util.Calendar 不可以通过new来获取一个实例,可以通过类方法getinstance()获取此类型的一个通用的对象 ①用法: Calendar ...
- Web应用性能优化思路
瓶颈是什么? 一条4车道的公路,运行非常顺畅,突然出了点事故,事故车导致某个地方只剩下1车道,然后就开始堵车,因为四辆车同时塞向一个车道里.把这个事故清除了,故障车拖走了,道路会开始恢复了通畅. 这个 ...
- iOS 之UIButton左文右图
对于button,当添加了图片时,默认是左图右文的 '[self.pageViewsLB setImage:[UIImage imageNamed:@"read"] forStat ...
- 简单的php socket 实例
server: <?php set_time_limit(0); $ip = '127.0.0.1'; $port = 8888; // 1. 创建 if( ($sock = socket_cr ...
- not in 和 not EXISTS 的区别
1.in和exists in是把外表和内表作hash连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询,一直以来认为exists比in效率高的说法是不准确的.如果查询的两个表 ...
- Python 创建本地服务器环境生成二维码
一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
- ppmoney 总结二
1. return false ES6函数的扩展:箭头函数 数组 arr.map() arr.filter() <!DOCTYPE html> <html lang=&qu ...
- PROC 文件系统调节参数介绍(netstat -us)
转自:http://www.cnblogs.com/super-king/p/3296333.html /proc/net/* snmp文件 Ip: ip项 Forwarding : 是 ...