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.行内元素居中 ...
随机推荐
- JSP页面JSTL提供的函数标签EL表达式操作字符串的方法
首先在jsp页面导入标签<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions&quo ...
- [转]加速Android Studio/Gradle构建
加速Android Studio/Gradle构建 android android studio gradle 已经使用Android Studio进行开发超过一年,随着项目的增大,依赖库的增多, ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- nginx优化
此文章非原创,出自鸟哥之手~ http://blog.chinaunix.net/uid-25266990-id-2985541.html 改排版改得多,当然红色部分要注意下,用得较多 ------- ...
- python 3.5: TypeError: a bytes-like object is required, not 'str'
出现该错误往往是通过open()函数打开文本文件时,使用了'rb'属性,如:fileHandle=open(filename,'rb'),则此时是通过二进制方式打开文件的,所以在后面处理时如果使用了s ...
- 如何利用rem在移动端不同设备上让字体自适应大小
本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...
- android 决解启动屏白黑屏会延迟几秒的问题
通常写启动屏,都有个很不喜欢的问题,就是会空白几秒才显示界面,而且界面还是很简单的! 解决办法 1 写一个透明的主题,一般启动屏都是不要bar的所以继承AppTheme.NoActionBar < ...
- 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。如果应下载文件,请添加 MIME 映射。
第一步: windows 8系统,运行aspx页面出现上述错误信息,解决办法如下: iis7 :控制面板->打开或关闭windows功能->Internet信息服务->万维网服务-& ...
- Swift - UIBezierPath
使用UIBezierPath可以创建基于矢量的路径.使用此类可以定义简单的形状,如椭圆.矩形或者有多个直线和曲线段组成的形状等.主要用到的该类的属性包括 moveToPoint: //设置起始点 ad ...
- [BI项目记]-新任务创建
上一篇介绍了如何处理一个Bug工作,此篇主要介绍如何借助TFS对于一个新需求创建一个新的工作项. 这里假定,有一个新的需求,需要创建五个报表. 然后开发的工作流程如下: 这个流程总结起来大致如下: 首 ...