居中浮动 DIV

2024-01-09

我正在尝试将 3 个浮动 DIV 居中。如果我给父级 DIV 就可以了显示:表格;和子 DIV显示:单元格;它将像一张桌子一样工作。还有别的办法吗?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Center Div</title>
        <style type="text/css">
        #container
        {               
            text-align:center;
            margin:0 auto;          
            display:table;
        }
        #container div
        {           
            float:left;
            padding:5px;
            display:cell;
        }
        </style>
    </head>
    <body>  
        <div id="container">
            <div style="background-color:yellow">Text 1</div>
            <div style="background-color:lightgreen">Text 2</div>
            <div style="background-color:lightblue">Text 3</div>            
        </div>
    </body>
</html>

我认为如果你定义宽度,显示:块,边距0px自动,位置:相对它应该起作用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

居中浮动 DIV 的相关文章

  • 在 th:href 链接中使用模型属性

    有没有办法在 th href 链接中引用模型属性 例如 a a Here 当前用户是控制器中指定的模型变量 这可以很容易地访问 如th text标签 但是 那th href百里香解析失败 如果有任何方法以这种方式引用模型属性 则在th hr
  • 整个页面都是玻璃板

    有没有一种简单的方法可以在整个 HTML 页面上拥有一个 玻璃窗格 而不管缩放 幻灯片事件 平台 浏览器 移动 桌面 我所说的 简单 是指纯 CSS 支持 而不是插件 后备 插件建议也可能有用 Thanks 如果您只是指所有内容之上的一层
  • 位置:粘性滚动仍在移动的元素

    我需要显示类似于表格的内容 其中第一列可以水平滚动 该列会粘滞一段时间 但是当您滚动太多时 它会开始与其余部分一起移动 wrapper width 250px overflow auto display flex flex directio
  • html 抓取和 CSS 查询

    以下库的优点和缺点是什么 PHP 简单 HTML DOM 解析器 http simplehtmldom sourceforge net QP http querypath org phpQuery http code google com
  • 粉碎一个元素,向随机方向发送碎片

    我试图 粉碎 一个元素 例如 一个图像 并将其碎片朝随机方向飞行 当碎片到达目的地时 即x距离 以像素为单位 它们变成原始图像的较小版本 jQuery UI 的explode http api jqueryui com explode ef
  • MP4 视频无法在 Firefox 上播放

    我有一个小型家庭服务器 可以托管多个项目 其中包括一些 MP4 示例视频 我一直在使用一个简单的
  • 内容安全策略:页面设置阻止自行加载资源?

    我有基于 Java 的 Web 应用程序运行在Tomcat http en wikipedia org wiki Apache Tomcat6 我的应用程序在本地主机和端口 9001 上运行 为了使我的应用程序更加安全并降低风险XSS ht
  • IE 上具有最小宽度的内联跨度

    Hi我有 3 个SPAN那一定是inline并且有和一个min width 显然在 IE 上 SPAN不能有一个min width 我尝试使用DIV但当我把它放在inline the min width是忽略 CSS span displa
  • Antd select 元素:如何禁用输入?

    我正在尝试使用模式 multiple 的选择元素 我希望禁用输入 这意味着用户只能在现有选项之间进行选择 而不能输入文本 我该怎么做呢 我的元素 import Select from antd import antd dist antd c
  • 使用 BASH 和 AWK 创建 HTML 表

    我在创建 html 表来显示文本文件中的统计信息时遇到问题 我确信有 100 种方法可以做得更好 但这里是 以下脚本中的注释显示了输出 bin bash function getapistats curl s http api exampl
  • 如何将 HTML 表单的值放入“自定义”URL 中?

    在我的网站上 我可以通过访问 mysite com search search term 来访问搜索功能 其中 search term 是用户输入的术语 我正在尝试获取一个简单的单输入表单来以这种方式格式化 URL 我可以做到的一种方法是制
  • 与容器内的大量元素(DOM、javascript)快速交互

    因此 我在容器 div 内有大量的 div 4000 5000 每个包含跨度 锚点 图像等 基本上我将它们的显示设置为无或根据条件阻止 这确实需要一些时间 在我更快地寻找东西时 我遇到了这个页面https developers google
  • 使用 rtmp 和 videojs 流式传输视频

    我正在寻找一种使用 rtmp 流播放视频的方法 我使用 video js 但它不起作用 Firebug 返回错误 L attribut type sp cifi sur video flash n est pas g r Le charge
  • HTML 解析 - 从 div 内的表格获取数据?

    我对 HTML 解析 抓取的整个想法还比较陌生 我希望我能来这里获得我需要的帮助 基本上我想要做的 我认为 是指定我希望从中获取数据的页面的 url 在这种情况下 http www epgpweb com guild us Caelestr
  • 如何将内部 div 与外部 div 的底部对齐?

    我需要将内部 div 与外部 div 的底部对齐 我的代码如下所示 div class myOuterDiv div class div1 floatLeft Variable content here div div class div2
  • 如何将身份验证详细信息传递给 iframe 内的应用程序?

    我有一个网页 想在其中显示詹金斯的网页 因此使用iframe like But http xxx xxx xx xx 8080 view Nightly 20Builds 20 打开登录页面 因此无法直接显示内容 其实我想在没有登录的情况下
  • 如何在 django 表单中设置自定义 HTML 属性?

    我有一个 Django 表单 它是页面的一部分 假设我有一个字段 search input forms CharField u Search word required False 我只能通过模板访问它 form search input
  • svg路径指针事件-点击检测

    我正在编写一些 HTML 以便可以使用 HTML SVG 和 PATH 标签绘制贝塞尔曲线 我的曲线效果非常好 现在我想添加一项功能 如果用户将鼠标悬停在曲线上 我会更改颜色 但实际情况是 SVG 创建了一个包含路径的大框 并捕获所有点击
  • 将 SVG 元素放置在图像上

    是否可以拥有以下元素并设置它们的样式 以便 SVG 对象出现在图像上 即像图像的一部分 目前它们显示在其下方的新行中 我知道我可以将图像设置为父 div 的背景图像 但不幸的是我还需要能够在父级内旋转它 所以我认为这不是一个选项 div s
  • Origin 无权使用地理定位服务 - 即使通过 HTTPS

    我有一个通过 HTTPS 使用 HTML5 地理定位的网页 它在桌面浏览器上运行良好 然而 在 iOS Safari 上 我收到错误 Origin 无权使用地理定位服务 我已确保页面上的所有内容都通过 HTTPS 加载 每个图像 每个脚本和

随机推荐

  • IIS 上的 Python:如何?

    我有 PHP dotNet 背景 并且对 Python 着迷 我想逐步将功能从 PHP 转置为 Python 并排运行各个部分 由于应用程序规模庞大 这一过渡可能需要 2 年时间 因此我必须使用 IIS 我有 15 年的 Web 编程背景
  • 使用 AFIncrementalStore 和 NSFetchedResultsController 出现死锁

    这几天我一直在苦苦思索这个问题 但我一生都无法弄清楚到底发生了什么 我对核心数据很陌生 但我对它足够了解 可以避免死锁情况 然而 对于这个项目 我决定尝试合并 AFIncrementalStore 我构建了一个示例项目来测试 APIClie
  • 使用 flex 将 Python 多行字符串与转义字符匹配

    我想知道如何将 python 多行注释与 flex 相匹配 我遇到了一些麻烦 以下工作正常Regexr https regexr com 但不被flex识别 我不知道如何修复它 1 2 以前 我使用过 3 0 2 3 它可以检测以下评论 A
  • Python dryscrape 抓取带有 cookies 的页面

    我想从网站获取一些数据 这需要登录 我通过以下方式登录requests url http example com response requests get url email email protected cdn cgi l email
  • 从 github 项目分发二进制文件的最佳实践是什么? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 从 github 项目分发二进制文件的最佳实践是什么 我能想到 在项目中创建一个 bin 文件夹 在其中保存二进制文件的副本 但是 github 旨在
  • iPhone 内存压力导致 iOS 钥匙串数据丢失?

    我正在 iPhone 5s 上通过调试器运行 iOS 应用程序 我使用钥匙串来存储密码 我使用 Apple 的 KeychainItemWrapper 示例来存储和检索我的钥匙串项目 大约 99 99 的情况下 钥匙串检索都能完美运行 但是
  • AWS Terraform:通过匹配标签名称中的子字符串来过滤特定子网

    我有 6 个子网 我想从中过滤 3 个匹配子字符串的子网internal并在 rds 中使用 标签名称具有内部单词 并且希望根据该内部单词进行过滤 有人可以帮我吗 data aws vpc vpc nonprod sctransportat
  • 使用 jQuery .appendTo 后执行 CSS3 动画

    我想用 appendTo 修改元素的 DOM 位置 完成后 我需要使用 CSS3 为元素设置动画 该元素不会产生动画 而是捕捉到新的 CSS 样式 JavaScript run click function imageOriginal ap
  • xcode 构建错误:项目不包含方案

    我正在开发一个离子应用程序 但是当我尝试构建它时 它给了我以下错误 xcodebuild error The project named SnapHome does not contain a scheme named SnapHome T
  • 每个 CPU 的线程实际限制是多少?

    我一直在玩弄线程 试图将一些限制推向极致 为了我自己的娱乐 我知道线程池默认为 25 个线程 并且可以增加到 1000 个 根据 MSDN 但是 每个 CPU 核心的线程数的实际限制是什么呢 在某些时候 上下文切换会比线程保存造成更多的瓶颈
  • 为什么在没有“self”且没有装饰器的情况下声明 Python 类的方法不会引发异常?

    我认为以下代码会导致错误 因为据我所知 Python 类中的方法必须将 self 或任何其他标签 但按照约定为 self 作为其第一个参数 或者 cls 或类似的如果 classmethod使用装饰器 或者不使用装饰器 staticmeth
  • CSS 溢出 - 未按预期工作

    http jsfiddle net bSnaG http jsfiddle net bSnaG 在我看来 上面的例子应该看起来像一个灰色的盒子 x不越过边缘并且 y探出底部 但事实并非如此 显然是这样的overflow x hidden c
  • data.table 基于日期范围合并

    我有两张桌子 policies and claims policies lt data table policyNumber c 123 123 124 125 EFDT as Date c 2012 1 1 2013 1 1 2013 1
  • GSM SM5100B C M E E R R O R:4 错误

    我正在使用 Arduino 来控制 SM5100B GSM 设备 除了当我想在收到另一条短信后发送短信时 一切正常 我明白了 错误代码 确定 gt C M G S 2 5 确定 C M E E R O R 4 我处理上述收到的短信的代码 i
  • grpc:调用是半关闭错误

    我正在使用 Google Cloud Platform Speech API 我正在使用示例源进行开发 https github com GoogleCloudPlatform android docs samples tree maste
  • 在表单提交事件上打开 URL - Google 应用程序脚本

    我正在使用 Serge insas 提供的示例代码 用于打开 URL 的 Google Apps 脚本 https stackoverflow com questions 10744760 google apps script to ope
  • 将 List> 转换为 IList>

    我写了一个方法是public List
  • 用于创建格式化 XLSX 电子表格的 JS 库

    我目前正在使用 JS 创建通用电子表格https www npmjs com package xlsx https www npmjs com package xlsx 这可以很好地生成一个通用电子表格来显示我的数据 但是 我想添加一些功能
  • 将 PST 格式的日期和时间转换为 UTC 格式

    我有一个变量 str 字符串类型 其值为 28 Nov 2013 09 15 AM 如何将其转换为 UTC 格式 str 变量中的上述时间采用 PST 因此 UTC 应该是 8超过这个时间 我正在使用 flex 2 下面发现以下代码不起作用
  • 居中浮动 DIV

    我正在尝试将 3 个浮动 DIV 居中 如果我给父级 DIV 就可以了显示 表格 和子 DIV显示 单元格 它将像一张桌子一样工作 还有别的办法吗