好程序员分享居中一个float元素

时间:2022-09-04 23:25:27

  好程序员分享居中一个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. 第一章-第七题( 有人认为,&OpenCurlyDoubleQuote;中文编程”, 是解决中国程序员编程效率一个秘密武器,请问它是一个 &OpenCurlyDoubleQuote;银弹” 么&quest; )--By 侯伟婷

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. C和指针 第十五章 文件I&sol;O

    stdio.h中包含了声明FILE结构 struct _iobuf { char *_ptr; //文件输入的下一个位置 int _cnt; //当前缓冲区的相对位置 char *_base; //指 ...

  2. Oracle之PL&sol;SQL学习笔记

    自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了一下,给大家分享,有不足之处还望大家 ...

  3. UIPikerView的属性

    1.    numberOfComponents:返回UIPickerView当前的列数 NSInteger num = _pickerView.numberOfComponents; NSLog( ...

  4. java之代理模式

    静态代理: java代理是一种模式--代理模式.采用代理模式,可以在不改变目标类代码的基础上,通过代理对象,来增加额外的功能(比如增加日志检测等)或者只需要目标对象的部分行为. java中,代理分为静 ...

  5. 月薪10K必备--C&num;下拉框联动

                   下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...

  6. angularjs学习笔记三——directive

    AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...

  7. 【正则表达式】--python(表示字符)

    [前修知识] match :匹配    span:范围 match 是从头往后开始匹配,search不按照顺序,直接获取自己想要的,有就显示,没有就None r 代表反转义,前面也提到过这个知识,如果 ...

  8. 2017-06-23(chmod whoami chown)

    文件权限设定 chmod u-x newfile chmod u-x,g+w newfile chmod a=rwx newfile [mode=421] r = 4 , w=2, x=1 chmod ...

  9. java打印等腰三角形的两种方法!(根据行数,根据底边长度)

    首先来看根据用户输入的底边的长度判断: package cn.edu.nwpu.java; import java.util.Scanner; public class IsoscelesTriang ...

  10. 测试APPEND INSERT是否产生UNDO信息的过程

    D:\>sqlplus test/testSQL*Plus: Release 11.1.0.6.0 - Production on 星期三 06月 29 19:46:41 2016Copyrig ...