2019独角兽企业重金招聘Python工程师标准>>>

1.<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>center</title>

<style type="text/css">

.p{ position:relative; float:left; left:50%; }

.c{ position:relative; float:left; right:50%; border:1px solid #f00; }

</style>

</head>

<body>

<div>

<div>cccccccc</div>

</div>

</body>

</html>

2.

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>center</title>

<style type="text/css">

.p{ position:relative; float:left; left:50%; }

.c{ position:relative; float:left; right:50%; border:1px solid #f00; }

.p1{ position:relative; }

.c1{ position:absolute; width:500px; height:300px; top:50%; left:50%; margin:-150px 0 0 -250px; background:#000;}

</style>

</head>

<body>

<div>

<div>cccccccc</div>

</div>

<div>

<div>c1c1c1c1c1c1</div>

</div>

</body>

</html>

转载于:https://my.oschina.net/glelaine/blog/297713

如何居中一个浮动元素？相关推荐

  1. 如何居中一个div？如何居中一个浮动元素？

    居中一个div: 给div设置一个宽度,margin:0px auto. position:absolute top:50%,left:50% transform:translate(-50%,-50 ...

  2. css中如何居中一个浮动元素,css浮动元素的居中的例子

    居中对于大家来说指的是页面了,此时我们通常使用提50%来实现了,下面来看一个css浮动元素的居中的例子,希望例子对各位有用. 关于浮动元素的居中,其实不太常用,但为了应付某些奇葩的面试官,也要知道怎么 ...

  3. [css] 怎样把一个div居中？怎样把一个浮动元素居中？怎样把绝对定位的div居中？

    [css] 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中? 主要用到:text-alin: center;margin: 0 auto;position: relative ...

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

    为什么80%的码农都做不了架构师?>>>    好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果.对于,在文档流中的元素,我们 ...

  5. 如何垂直居中一个浮动元素

    如何垂直居中一个浮动元素 // 方法一:已知元素的高宽 #div1{ width:200px; height:200px; position: absolute;        /*父元素需要相对定位 ...

  6. 如何居中一个元素（终结版）

    一.水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对inline.inline-block.inline-table和in ...

  7. html div位于居中元素右边,如何居中一个元素（终结版）

    原标题:如何居中一个元素(终结版) 作者:前端工匠公号 / 浪里行舟 (本文来自作者投稿)前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 一.水平居中 1.行内元素水平 ...

  8. css --- 浮动元素与 块框/行内框重叠时的细节

    块框,可以认为是块级元素(如div.h1)的内容区 + 内边距 行内框可以认为是行内元素(如span)的内容区 + 内边距 当 块级框/行内框 和一个浮动元素重叠时,行内框的边框.背景和内容都在幅度元 ...

  9. css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法

    一.问题 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来. 若浮动元素前面还有同级元素没有浮动则会影响页面结构. 二.解决办法 ...

最新文章

  1. mysql 使用位运算
  2. Dicom Test Files
  3. 数据库实例: STOREBOOK 表空间 编辑 表空间: TEMP
  4. Linux 常见命令
  5. 【职场】税前110万
  6. 获取打开文件的路径和文件名
  7. 阿里P8架构师谈：高并发网站的监控系统选型、比较、核心监控指标
  8. QT中的QButtonGroup
  9. matlab瓶盖盖严检查,盖检机|瓶盖检测|外观检测设备|誉阵科技
  10. MySQL怎么导出用户权限表_导出MySQL用户权限_MySQL
  11. kali linux切换更新源_KALI更新源2020版（永久实用）
  12. linuc和python常用命令是一样的么_linuc和python常用命令是一样的么_python教程3--《linux常用命令》...
  13. Scala 集合 —— Array、Map、Seq、Set
  14. 使用IDEA 导入桌面的项目（解压之后的项目）
  15. 全球首列氢燃料混合动力有轨电车成功商业运营，全程“无网”运行
  16. Android混淆使用详解
  17. 面试必问为什么想做运营？做运营需要具备哪些特质或素质？
  18. 零基础学Python课后实战第五章
  19. 微信jssdk常见错误及解决方法
  20. 怎么把dicom数据转成nifty数据

热门文章

  1. SpringBoot整合Grpc实现跨语言RPC通讯
  2. 初次体验hiphop-php
  3. ASP.NET设计应用程序的七大绝招
  4. H.264 基础及 RTP 封包详解
  5. 【Qt】使用QCamera获取摄像头，并使用图像视图框架QGraphics*来显示
  6. 这才是世界排名前十位的奢侈品
  7. Linux查看WAS的jvm信息,linux 下使用命令查看jvm信息
  8. java写事物提交_fabric-sdk-java 提交事务
  9. Java项目:仿小米商城系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
  10. java map class_java – 将通用Class参数限制为实现Map的类