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.行内元素居中 ...
随机推荐
- Oracle 文件的导入与导出
说明:本机使用的是32位oracle,使用的方法是plsql导入与导出 1.导出数据步骤. 1)登陆上plsql后在工具里选择导出用户对象,选择上所有的表在选择保存的路径.点击导出就可以了. 2)上边 ...
- C/C++: C++位域和内存对齐问题
1. 位域: 1. 在C中,位域可以写成这样(注:位域的数据类型一律用无符号的,纪律性). struct bitmap { unsigned a : ; unsigned b : ; unsigned ...
- maven项目断点依赖maven插件
- xcode 8 重新支持插件
苹果出了Xcode8之后,就加了签名让之前的自定义插件无法继续的安装使用.想要重新使用插件的话只要用自己的签名覆盖苹果的签名即可. 1.创建自签名证书 钥匙串->钥匙串访问->证书助理-& ...
- oracleDBA-D4
1.数据字典: 创建和维护的可修改的系统表..它存放有关数据库和数据库对象的信息. 数据字典=基表+字典视图 2.数据字典所存放的信息: 数据库的逻辑和物理结构(如:表空间和数据文件),数据对象定义的 ...
- docker--初体验
docker这个词已经越来越热,很多docker的概念是从周围人和知乎上看的,打算从功能上先了解docker,深入的话放在以后. ps:正好手头有一台腾讯云的vps,单核,1G内存,可以拿来做实验,腾 ...
- 用代码控制鼠标键盘（C#语言）
前些时间想做一个鼠标点击器,用到了这些知识. 下面整理记录一下. ps.感谢各位大神 下面直接上代码 1.鼠标的控制 class MouseMove { #region MouseEvent [Sys ...
- 快速掌握、学习HTML的方法
链接 超级链接用<a>标签表示,href属性指定了链接到的地址.<a>标签可以包含文本,也可以包含图片. 点击查看效果 <a href="http://deer ...
- scp 从远程服务器上一下载文件
scp -P202 xx3.x6.xx.xx:/usr/local/zookeeper-.zip /tmp #指定远程服务器的端口和远程服务器的目标文件 ,最后指定要下载到本的地目录 也可以从远程服务 ...
- 百度UEditor在线编辑器的配置和图片上传
前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...