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.行内元素居中 ...
随机推荐
- FileUtil（from logparser）
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.ByteArrayOutputStream; ...
- php给客户端返回数据注意。
亲身测试: 返回的时候不要直接返回字符串,要用数组的方式返回数据客户端才能接收. 看代码. <?php require_once("../base.php"); functi ...
- ofbiz定时任务配置
1.一个service的java类 2.在framework/service/servicedef/service.xml中配置上一步的service服务. <service name=&quo ...
- Tomcat7.0+ web.xml问题
Tomcat7+版本的web.xml都加上 <context-param> <param-name>webAppRootKey</param-name> <p ...
- XStream xml 解析框架使用笔记
1. xml的标签可以映射为类.类成员变量 2. 有子标签的标签映射为类,没有子标签的便签映射为类成员变量 3. 类名.类成员变量名如与标签名不一致需要通过注解或代码设置别名 // 类名 @XStre ...
- Redis 外部访问设置
1.错误原因 Redis搭建好后一般都是使用编程语言进行连接调用,默认Redis的设置是不允许外界访问的,连接Redis只能通过本地(127.0.0.1)来连接,而不能使用网络IP(192.168.1 ...
- 新浪云SAE搭建python环境 问题拾遗
1.python程序部署到sae上需要做的改动 在线上需要转换成wsgi的形式运行python程序. sae中运行python程序需要指定一个函数为入口函数. application = sae.cr ...
- 联想笔记本如何开启笔记本的VT-x虚拟化技术功能
虚拟化技术支持,需几个方面的条件支持:芯片组自身支持.BIOS提供支持.处理器自身支持.操作系统支持. 操作系统方面,主流操作系统均支持VMM管理,因此无需考虑. 而芯片组方面,从Intel 945( ...
- I Could Have Danced All Night
百老汇著名音乐剧<窈窕淑女(My Fair Lady)>中脍炙人口的经典歌曲. Bed, bed ,I couldn't go to bed床,床,我不能上床去 My head's too ...
- （转）论python工厂函数与内建函数
所谓工厂函数就是指这些内建函数都是类对象, 当你调用它们时,实际上是创建了一个类实例. 工厂函数: int(),long(),float(),complex(),bool() str(),unic ...