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 ...
随机推荐
- HTML-Table-Td固定宽度使内容换行
table style="TABLE-LAYOUT: fixed;" td style="WORD-WRAP: break-word;WIDTH:200px;"
- Action三种编写方式
1. 创建普通类不实现接口与继承类 2. 实现Action接口 3. 继承ActionSupport类(常用)
- hadoop2.2.0安装需要注意的事情
今天在安装hadoop2.2.0时遇到若干问题,解决这些问题有些心得,记录下来以备不时之需. 问题1.master和slave之间不能相互ssh免密码登陆. 问题表象此处略过,直接说解决办法: 1.查 ...
- 如何禁止eclipse对js文件的校验（building validate）
在项目(project)上点击右键,依次选择1.Select Properties -> JavaScript -> Include Path2.Select Source tab. ( ...
- spring项目改名后不能启动的原因及解决办法
今日修改了一个spring项目的项目名称,修改后启动项目Debug as->Debug on server,过了很久也没有出现web首页,仔细看项目的定时器已经启动,eclipse的Consol ...
- 【LeetCode】【动态规划】Generate Parentheses（括号匹配问题）
描述 Given n pairs of parentheses, write a function to generate all combinations of well-formed parent ...
- 《程序员代码面试指南》第一章 栈和队列 构造数组的MaxTree
题目 给出一个无重复元素的数组,构造此数组的MaxTree, java代码 /** * @Description: 构造数组的MaxTree * @Author: lizhouwei * @Creat ...
- 第二篇 javascript一维数组和二维数组及方法
一.数组 什么是数组 程序=数据+算法 数组就是一种很常见的保存批量数据的数据结构 一.定义数组 var arr1=[]; //定义了一个不包含元素的数组 ,,]; //定义了一个包含三个元素的数组 ...
- MyBatis入门级Demo
1.创建Java工程MyBatisTest001,导入jar包(mybatis-3.2.1/mysql-connector-java-5.1.24-bin); 2.创建User表,数据库(MySql) ...
- Idea中配置Tomcat7的JNDI
1.进入目录 D:\apache-tomcat-7.0.73\conf\Catalina\localhost 添加hello.xml ,内容为: <Context path="/hel ...