css中将div定位居中

一直，我是认为定一个width，然后写一句margin:0 auto,就可以，但是有时也会不管用。

例如当我要定一个宽度为700的div，用相对定位定在中间。任你怎么拉伸都是居中。而position:absolute; left:50%; margin-left:-350px; 而这个350px则是这个元素宽度的一半。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script type="text/javascript" src="jquery-2.0.3.js"></script>

<style>

.scroll{height:2000px;}

.main{width:%;height:550px; background-color:#fe3a08; position:relative;}

.cent{width:700px;color:#fff; font-size:46px; font-family:"幼圆"; position:absolute; left:50%; margin-left:-350px;line-height:500px;top:0px;}

</style>

<script>

function changeTop(obj, value) {

    var offsetTop = obj.offset().top + value;

    var scrollTop = $(window).scrollTop();

    console.log(offsetTop);

    console.log(scrollTop);

    var result = scrollTop - offsetTop ;

    if ((offsetTop < scrollTop) ) {

        obj.find(".bg-image").stop(true,true).animate({ "top": result }, );

    }

    if (offsetTop + < scrollTop) {

        obj.find(".bg-image").stop(true,true).animate({ "top": "0px" }, );

    }

}

$(function(){

    $(window).scroll(function () {

        changeTop($(".main"),);

    })

})

</script>

</head>

<body>

<div class="scroll">

    <div class="main">

        <div class="cent bg-image">

                R6 BRANCH OFFICE | 工程管理

        </div>

    </div>

</div>

</body>

</html>

css中将div定位居中的更多相关文章

用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站例如一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念利用表格 ...
HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
CSS样式div
页面中,有很多样式标签:div标签,对标签定位的地方有: 1.<head>标签里加<style>标签,在<style>标签中添加样式.如: <style> ...
HTML5：footer定位（底部+居中）的探讨+div图片居中问题
初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...
CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
css 如何使图片与文字在div中居中展示？
1.情景展示如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
绝对定位的DIV绝对居中显示
绝对居中:即在客户端上任何分辨率下纵横方向均居中紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
CSS背景图片定位
原文:CSS背景图片定位在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
CSS学习摘要-定位实例
CSS学习摘要-定位实例注:全文摘自MDN-CSS定位实例列表消息盒子我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

随机推荐

用Ant实现Java项目的自动构建和部署（转）
Ant是一个Apache基金会下的跨平台的构件工具,它可以实现项目的自动构建和部署等功能.在本文中,主要让读者熟悉怎样将Ant应用到Java项目中,让它简化构建和部署操作. 一． ...
prefix springmvc
设置了@RequestMapping("/jsp/info.do"),也可以写成"jsp/info.act"不影响 retuen "index&quo ...
jsp bean标签
jsp中存在一个奇奇怪怪的bean标签. 例如现在在java包中定义一个类test2 package bean; public class test { private int number; pu ...
linux源码阅读笔记 jmpi指令（转）
jmpi是段间跳转指令,用于x86实模式下, 如:BOOTSEG = 0x0c70 jmpi 4, #BOOTSEG 假如当前段CS==00h,那么执行此指令后将跳转到段CS==0x0c70,当 ...
漫谈CGI FastCGI WSGI
作者:auxten链接:https://zhuanlan.zhihu.com/p/20054757来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. CGI(Common ...
CentOS下安装Redmine 2.5.2
Redmine是用Ruby开发的基于web的项目管理软件,所以先要下载安装Ruby,再下载对 Ruby组件进行打包的 Ruby 打包系统RubyGems. 第一步:下载必要的软件 1.依赖包安装 # ...
hdu 1863 畅通工程（最小生成树，基础）
题目 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include<string.h> #include <ma ...
JavaScript 隐式转换
javascript 中的怪癖,js运算符隐式类型转换 x + "" //等价于 String(x) + x //等价于 Number(x),也可以写成x-0 !!x //等价于 ...
URL中的特殊字符处理笔记
URL中的特殊字符有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.编码的格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII ...

css中将div定位居中

css中将div定位居中的更多相关文章

随机推荐

热门专题