好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果。对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin:0 auto;就行了,这种技巧甚至在IE6中兼容得很好。

  那么如何让浮动的元素水平居中呢?浮动元素脱离了文档流,上面的方法肯定是不行的。特地去网上查了一下,做为学习笔记记录下来我们布局的时候,用margin来设置float元素的外边距来达到效果。对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin: 0 auto;就行了,这种技巧甚至在IE6中兼容得很好。

  那么如何让浮动的元素水平居中呢?浮动元素脱离了文档流。特地去网上查了一下,做为学习笔记记录下来

  .outer {

    1. <p><font size="3">  float: left ;</font></p>
    2. <p><font size="3">  postion: relative;</font></p>
    3. <p><font size="3">  left: 50%</font></p>
    4. <p><font size="3">  }</font></p>
    5. <p><font size="3">  .inner {</font></p>
    6. <p><font size="3">  float: left;</font></p>
    7. <p><font size="3">  position: relative;</font></p>
    8. <p><font size="3">  left: -50%;</font></p>
    9. <p><font size="3">  /*right: 50%*/</font></p>
    10. <p><font size="3">  }</font></p>

好程序员分享居中一个float元素的更多相关文章

  1. 好程序员分享该如何选择background-image和img标签

    好程序员分享该如何选择background-image和img标签,用img标签 如果你希望别人打印页面时候包含这张图片请使用img标签 当这张图片有非常有意义的语义,比如警告图标,请使用img标签及 ...

  2. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

  3. 如何居中div?如何居中一个浮动元素?

    如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...

  4. 第一章-第七题( 有人认为,“中文编程”, 是解决中国程序员编程效率一个秘密武器,请问它是一个 “银弹” 么? )--By 侯伟婷

    首先,“银弹”在百度百科中的解释是银色的子弹,我们更熟知的“银弹”一词,应该是在<人月神话>中提到的.银弹原本应该是指某种策略.技术或者技巧可以极大地提高程序员的生产力[1].此题目中关于 ...

  5. 程序员简单打造一个灵活智能的自动化运维系统C#实例程序

    你是一个程序员,被派去管理公司500台计算机.这些机器可能需要执行一些自动化任务,一台台手动操作会把你累死.重复性的工作还是交给电脑处理,怎么解决这个问题呢?一个自动化的运维系统是必须的.自己实现的好 ...

  6. 拿到蚂蚁金服的offer是一种什么体验?3年Java程序员分享面经

    前言:我是一名三年的Java程序员,之前一直是在外包公司工作的.在这个月五号的时候,通过我的学长做内推,有了去蚂蚁金服面试的机会.我是在12号接到的电话面试的,因为蚂蚁金服需要7天的简历评估的.还有就 ...

  7. android在一个应用程序员启动另一个程序

    一般我们知道了另一个应用的包名和MainActivity的名字之后便可以直接通过如下代码来启动: Intent intent = new Intent(Intent.ACTION_MAIN); int ...

  8. 好程序员分享DIV+CSS3和html5+CSS3有什么区别

    DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而 ...

  9. #华为云·寻找黑马程序员# 如何实现一个优雅的Python的Json序列化库

    在Python的世界里,将一个对象以json格式进行序列化或反序列化一直是一个问题.Python标准库里面提供了json序列化的工具,我们可以简单的用json.dumps来将一个对象序列化.但是这种序 ...

随机推荐

  1. 知其所以然~redis的原子性

    原子性 原子性是数据库的事务中的特性.在数据库事务的情景下,原子性指的是:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节. 对于Redis而言,命 ...

  2. Node.js与Sails~redis组件的使用

    有段时间没写关于NodeJs的文章了,今天也是为了解决高并发的问题,而想起了这个东西,IIS的站点在并发量达到200时有了一个瓶颈,于是想到了这个对高并发支持比较好的框架,nodeJs在我之前写出一些 ...

  3. 基础才是重中之重~Dictionary<K,V>里V的设计决定的性能

    回到目录 字典对象Dictionary<K,V>我们经常会用到,而在大数据环境下,字典使用不当可能引起性能问题,严重的可能引起内在的溢出! 字典的值建议为简单类型,反正使用Tuple< ...

  4. 如何比较版本号--Python实现

    需求 在写一个程序Django项目的setup程序(初始化环境,比如设置PIP源,安装该项目依赖的各种模块等操作)遇到一个系统当前模块版本和项目所需版本的比较然后给出建议是忽略还是升级.我的要求是不仅 ...

  5. 设计模式总结篇系列:代理模式(Proxy)

    时代在发展,我们发现,现在不少明星都开始进行微访谈之类的,有越来越多的参与捐赠等.新的一天开始了,首先看下新的一天的日程安排: interface Schedule{ public void weiT ...

  6. #1 爬虫:豆瓣图书TOP250 「requests、BeautifulSoup」

    一.项目背景 随着时代的发展,国人对于阅读的需求也是日益增长,既然要阅读,就要读好书,什么是好书呢?本项目选择以豆瓣图书网站为对象,统计其排行榜的前250本书籍. 二.项目介绍 本项目使用Python ...

  7. [国家集训队] Crash的文明世界

    Description 给定一棵 \(n\) 个点的树,对于每个点 \(i\) 求 \(S(i)=\sum\limits_{j=1}^n \operatorname{dist(i,j)}^k\) .\ ...

  8. Perl IO:简介和常用IO模块

    三篇Perl IO基础类文章: Perl的IO操作(1):文件句柄 Perl的IO操作(2):更多文件句柄的模式 Perl文件句柄相关的常见变量 IO对象和IO::Module家族模块 无论是哪种高级 ...

  9. Node.js 应用:Koa2 使用 JWT 进行鉴权

    前言 在前后端分离的开发中,通过 Restful API 进行数据交互时,如果没有对 API 进行保护,那么别人就可以很容易地获取并调用这些 API 进行操作.那么服务器端要如何进行鉴权呢? Json ...

  10. Scrapy爬虫错误日志汇总

    1.数组越界问题(list index out of range) 原因:第1种可能情况:list[index]index超出范围,也就是常说的数组越界. 第2种可能情况:list是一个空的, 没有一 ...