css中的特殊居中
大图居中：
先看一下普通的居中：
代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .img{
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="center">
<img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>
浏览器100%的时候显示为：
浏览器缩小时：
如图，当浏览器大小小于图片大小的时候，图片会贴靠在左边而不再移动。
我的理解是，当图片设置为居中，浏览器界面小于图片大小的时候，浏览器会挤住图片。因为图片小于浏览器的部分，浏览器不愿意收留图片多余的部分，哎图片这可怜的孩儿。当然这种情况我是看不下去的，所以，我强制让浏览器“收留”它。
代码修改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.center {
position: relative;
left: 50%;
} .img {
display: block;
/*margin:0 auto;*/
position: relative;
left: -342px;
}
/*主要的思路就是，图片的中心点为中心，而不是已图片的左上角为中心*/ </style>
</head>
<body>
<div class="center">
<img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>
效果图为：
如图，浏览器缩小的时候，图片依然居中。（浏览器，你敢不收留它，废了你\）。
当然拿这个思路也就引出了淘宝著名的“双飞翼布局”。
简要说明一下双飞翼布局，它是当浏览器缩小的时候，中间栏随浏览器变化而变化。而侧栏不随浏览器变化而变化。
先看下效果图：
开始时候：
浏览器缩小的时候：
这种布局和上面的居中方式使用的方法基本差不多。一个字，悟。当然css3中有个方法可以简单实现这种
当然css3中有个方法可以简单实现这种。display:flex。称为“弹性盒子”这种只能ie9+
先看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子模型</title>
<style>
body{
margin: 0;
}
#container{
display: flex;
flex-direction: row;
width: 300px;
height: 300px;
}
.a{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: #0099FF;
}
.b{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: darkorange;
}
.c{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>
那代码来说，先给父类一个display:flex。然后给子类设置flex:n。
这种方法的实现思想是，如代码，子类有三个，都设置为，flex:1,意思是每个子类占父类三分之一。
用这种方法可以轻松实现双飞翼布局，如代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子模型</title>
<style>
body{
margin: 0;
}
#container{
display: flex;
flex-direction: row;
width: 300px;
height: 300px;
}
.a{
/*flex: 1;*/
width: 100px;
height: 100%;
background-color: #0099FF;
}
.b{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: darkorange;
}
.c{
/*flex: 1;*/
width: 100px;
height: 100%;
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>
a,c设置固定宽度，b设置flex：1即可。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
by9.6
现阶段整理出来最好的：
/**
* Created by Administrator on 2016/9/6.
*/
$(function () { var div=$("<div></div>");
var content=div.clone();
content.css({
width:"960px",
position:"relative",
left:"50%"
});
var bak=div.clone();
bak.css({
position:"relative",
left:"-960px",
width:"1920px",
height:"615px",
background:"url(pic-big-v6.jpg)"
});
content.append(bak);
var con=div.clone();
con.css({
width:"100%",
overflow:"hidden"
});
con.append(content);
$("body").append(con);
});
三步：(说明：div1包围div2,div2包围div3,div3里面是背景图片)
①：div1: width:100% overflow:hidden
②：div2: position：relative left:50%
③：div3: 导入图片，设置图片的固定宽高，width和height。position:relative left:-npx (n为图片的一半大小)
css中的特殊居中的更多相关文章
- 讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
- CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- CSS中ul li居中的问题
一直以为对ul li居中对齐已经掌握了.但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来 ...
- CSS中元素各种居中方法（思维导图）
前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
随机推荐
- 还在用 kill -9 停机？这才是最优雅的姿势（转）
_ 最近瞥了一眼项目的重启脚本,发现运维一直在使用 kill-9<pid> 的方式重启 springboot embedded tomcat,其实大家几乎一致认为:kill-9<pi ...
- python学习-4-类的使用
class Animal: def __init__(self, name): # Constructor of the class self.name = name def talk(self): ...
- iOS category 类别 和 extension 扩展
category 类别 又称为 分类 在ios项目开发中允许使用类别为现有的类添加新的方法,并不需要创建子类.通过类别我们可以动态地为现有的类添加新的方法,可以将类的定义模块化地布局到多个相关文件中 ...
- 【LeetCode】【数组归并】Merge k Sorted Lists
描述 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...
- c的详细学习（8）指针学习（二）
(1)指针与二维数组 一个数组的名字代表该数组的的首地址,是地址常量(作为形式参数的数组名除外),这一规定对二维数组或更高维数组同样适用. 在c语言中定义的任何一个二维数组实际上都可以看做是一个一维数 ...
- <开源项目分析>Cisco的开源视频加解码器THOR（H.264解码）
原创博客,转载请联系博主! 题外话:自学了快两个月的Perl语言,本来打算写两篇基础介绍的博文来科普一下一些小技巧,但是仔细想想还是没有必要了吧,毕竟现在无论是在用Perl5还是Perl6的人都是小众 ...
- 《机器学习实战》学习笔记第十四章 —— 利用SVD简化数据
相关博客: 吴恩达机器学习笔记(八) —— 降维与主成分分析法(PCA) <机器学习实战>学习笔记第十三章 —— 利用PCA来简化数据 奇异值分解(SVD)原理与在降维中的应用 机器学习( ...
- perl常用字符串函数
1.$position = index(string,substring,skipchars): 该函数返回子串substring在字符串string中的位置,如果不存在,则返回-1:参数skipch ...
- 在Treeview中节点的data属性中保存记录类型及其消除的办法
一.保存记录类型在data指针中: procedure TForm1.getheaditems(pp:TfrxBand;hnode:THeadTreeNode;var i:Integer;var j: ...
- LINQ 学习路程 -- 查询操作 Expression Tree
表达式树就像是树形的数据结构,表达式树中的每一个节点都是表达式, 表达式树可以表示一个数学公式如:x<y.x.<.y都是一个表达式,并构成树形的数据结构 表达式树使lambda表达式的结构 ...