给一个div绝对定位后，如何让它水平居中

<style>

.footer{position:absolute;left:0;right:0}

</style>

</div>

也就是说只要给你所定位的div的类加上left:0;right:0;(margin:auto;这个好像不加也管用)就可以了！

时间： 2024-10-14 17:09:54

给一个div绝对定位后，如何让它水平居中的相关文章

[小技巧]DIV绝对定位后，只水平居中显示

DIV绝对定位后,如何水平居中显示在浏览器中? ? 1 .div { width:1000px; position:absolute; left:50%; margin-left:-500px; } 关键在于margin-left:-500px的值是根据div 的宽度决定,取其宽度的一半. 注:主要用于新手引导功能.

这个标题实在是我无奈之下才取出来的,毕竟我文采有限~ 今天我遇到的一个eggpain的问题: 前提:当页面上有两个没有background的div,大小一样,绝对定位在同一个地方(让第二个遮挡住第一个),但是第一个div中有一个img,并且给这个div添加一个click事件出现的问题:点击第二个,居然触发了第一个div的click事件,在ie10以下(包括ie10)都会出现这个问题(chrome是对的). 解决方法: 给第二个div添加背景,但是背景都有颜色(加transparent也没用),

ie中绝对定位后的bug

前几天在写一个项目<淘宝全屏海报代码生成器(网页版)>时发现一个很严重的问题,是什么问题呢?a标签绝对定位后在ie下会发生无法点击的现象! 由于该项目中有一个功能是“一图多链接”功能,正常情况下都是用热点来完成.但洒家是极不习惯用热点,于是便用a标签替代热点,最终的功能当然是一样的了.(注:这里的功能指画矩形的功能,并非不规则图形.)用a标签的话当然是需要绝对定位了,但是当洒家在生成代码后在ie下测试时发现一个很奇怪的现象,a标签奇迹般的消失了,这不科学啊!洒家利用jq来获取到a标签的大小,以

jQuery生成一个DIV容器，ID是"rating".

我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数.看一下rate.php代码.虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating". $(document).ready(function() { // generate markup var ratingMarkup = ["lease rate: "];

用css控制一个DIV画图标。

在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样的效果了,而且还方便后期的维护.我们今天画四个图形,一个三角形,一个直角三角形,两种方法画多边框正方形,同心圆,分享图标. 三角形首先,我们先画一个三角形代码如下: 1 <div id="duo1"></div> 对就是用一个DIV来画. 我们可以把这幅图补脑

js实现动态给一个div添加文本内容与简单的日历

js实现动态给一个div添加文本内容(即在文本框中输入一段文字,点击设置文字按钮实现将文本框中的文字添加到div中) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <style

利用css来让一个div在页面中垂直居中的方法

一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半. width:300px; height:200px; position:absolute; left:50% top:50%; margin:-100px 0 0 -150px ; 2.使用jquery代码 $(window).resize(function(){ $

CSS中div覆盖另一个div

将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <html> <head> <style> #div1{position:absolute;width:300px;height:300px;background:#ccc;} #div2{position:absolute;left:0;top:0;width:200px;height

CSS: 解决Div float后，父Div无法高度自适应的问题

在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整.要解决这个问题(也叫做闭合(清除)浮动),我们有四种办法: 1. 额外标签法这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签.我个人比较喜欢这种方法,因为它简单.实用.浏览器兼容性好,而且这种方法也是W3C推荐的方法 <div