文档章节

float元素居中

激烈的海胆
 激烈的海胆
发布于 2017/06/19 11:29
字数 42
阅读 6
收藏 0
<style type="text/css">
    .con {
        position: relative;
        float: left;
        left: 50%;
        background: lightblue;
    }
    .box {
        position: relative;
        float: left;
        left: -50%;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
<body>
    <div class="con">
        <div class="box"></div>  
    </div>
</body>

 

© 著作权归作者所有

激烈的海胆
粉丝 0
博文 25
码字总数 7600
作品 0
北京
前端工程师
私信 提问
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
2018/05/11
0
0
好程序员分享居中一个float元素

好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果。对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin:...

好程序员IT
04/22
1
0
学习CSS你必须踩得那些坑(六)

这里加了边框方便调试: · 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height):我们设置行内元素<a> display为inline-block 行内元素是就像水一样,垂直方向...

博为峰教研组
2016/12/26
7
0
css实现水平、垂直居中的几种方法

用text-align: center来实现水平居中(只能实现文本的水平居中) //html<div class="center"> 文本水平居中</div>//css.center{width: 200px;height: 100px;background-color: #a036b4; text......

lironghua
2014/05/07
137
0
使用 Flex 布局与其他普通布局的简单对比

最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。 一、左右 1:1 布局 布局: 利用 float 属性 在使用 flex 之前,实...

Gwokhov
2018/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

spring源码分析6: ApplicationContext的初始化与BeanDefinition的搜集入库

先前几篇都是概念的讲解:回顾下 BeanDefinition 是物料 Bean是成品 BeanFactory是仓库,存储物料与成品 ApplicationContext初始化搜集物料入库,触发生产线,取出物料生产Bean 本文研究spr...

星星之焱
29分钟前
5
0
彻底解决tomcat乱码问题

本地项目请求访问,浏览器中文输出没问题。 部署到服务器上面之后,返回到浏览器的中文就乱码了。 尝试办法: 1.修改tomcat下的conf中的service.xml中的配置信息: 重新启动后,没有效果还是...

诗书易经
45分钟前
5
0
Java开发需要掌握的IDEA插件大全

1、Lombok 解释:这是最基本的插件,2017年就火了,还没用的百度一下吧。 博客链接:Intellij IDEA 安装lombok及使用详解 2、PlantUML integration 解释:各种类之间的关联图,高级开发必备。...

木九天
45分钟前
6
0
python学习10.05:Python range()快速初始化数字列表

实际场景中,经常需要存储一组数字。例如在游戏中,需要跟踪每个角色的位置,还可能需要跟踪玩家的几个最高得分。在数据可视化中,处理的几乎都是由数字(如温度、距离、人口数量、经度和纬度...

太空堡垒185
52分钟前
4
0
java单元测试,PowerMockito模拟方法内new对象

在做单元测试中有时候需要对方法内new出来的对象进行隔离,这是我们需要使用PowerMockito。 添加依赖 <dependency> <groupId>org.powermock</groupId> <artifactId>......

如梦之猿
54分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部