如何让浮动div居中?

2024-01-16

我想将下面模型中出现的三个 div 居中(全部都有“float:left”)。 这可能吗?

我不介意有包装器div。

Text-align:center 和 display:inline-block 不适用于我的代码。


如果你想让它们居中,你就不能浮动它们。更好的选择是将它们全部制作display: inline-block所以你仍然可以将它们设计为块元素,并且它们仍然会关注你的text-align: center在父包装上。对于您提供的有限示例来说,这似乎是一个很好的解决方案。

为了考虑浏览器兼容性,您需要将它们更改为<span>而不是<div>在添加之前display: inline-block到他们身上。 IE7 及更高版本以及所有其他现代浏览器都支持此功能。不支持 IE6,但是仅在中国广泛使用 http://www.ie6countdown.com/.

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

如何让浮动div居中? 的相关文章

  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • jQuery 变量在定义时声称它是未定义的

    我试图在同一页面上有两个自动填充文本框 一个用于手机型号 input1 一个用于固件 input2 当两者都填充时 我希望显示一个带有ID input1input2 的div 但是当在input1 中输入值时 它声称phone 的变量未定义
  • 使用base64编码图像的优点和缺点[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在考虑为我正在开发的网站使用 Base64 编码图像来优化加载时间 不管怎样 在开始之前 我想知道 这样做的优点和缺点是什么 目前 我没有看
  • 使用内联样式有哪些风险?

    A 内容安全政策 https developer mozilla org en US docs Web HTTP CSP with a default src or style src指令将阻止内联样式应用于
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • 闪亮的应用程序包:css 和所有 www/ 目录内容

    我正在尝试将 Shiny 应用程序转换为 R 包 但我在处理有关 www 目录以及 松散 文件的所有问题时遇到了问题 我闪亮的应用程序运行得很好 但是当我尝试 打包它 时 它不起作用 我闪亮的应用程序目录 my shiny app R ut
  • 如何将大于整个页面 100% 的元素居中对齐?

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在
  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 在流体设计中将元素的宽度调整为其高度的百分比,反之亦然? [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用
  • 如何覆盖 bootstrap 表 td 样式?

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • Outlook 2013 渲染问题:嵌套表格截断相邻文本

    在开发 html 电子邮件通讯时 我经常使用类似于以下的结构 table width 244 border 0 cellpadding 0 cellspacing 0 tr td table border 0 align left tbod
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 在webview android中加载本地html文件

    我正在尝试在 android 的 webview 中加载 html 文件的内容 但是 它给了我 网页不可用错误 如果我尝试使用谷歌或雅虎等网站 它们就会起作用 html文件位于src gt main gt assests gt index
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航

随机推荐

  • XTestFakeButtonEvent 和 XSendEvent 之间的区别

    我正在尝试通过 x11 为 ubuntu 编写简单的鼠标点击器 首先 我编写了单击过程的第一个变体 基于 XSendEvent include
  • 如何对数据框中的多个时间序列进行多个静态测试

    我有以下 df head vardata Month repo Callrate WPI GDP FED nse usd 1 2001 04 01 9 00 7 49 5 41 4 6 4 50 1125 2 46 79 2 2001 05
  • python qt:自动调整主窗口大小以适应内容

    我有一个主窗口 其中包含一个主小部件 并为其设置了垂直布局 在布局中添加了一个QTableWidget仅 暂时 当我启动应用程序并在 main window 上调用 show 时 只有部分内容QTableWidget显示 我可以手动扩展窗口
  • 制作一行高的空div

    是否可以创建一个规则来生成以下 HTML div style width 100 div 只使用 CSS 的一行高度 或者我需要把 nbsp 作为内容 一些可能性 Set height https developer mozilla org
  • 为什么C#编译器会产生方法调用来调用IL中的BaseClass方法

    假设我们有以下 C 示例代码 class BaseClass public virtual void HelloWorld Console WriteLine Hello Tarik class DerivedClass BaseClass
  • 使用 swift 进行部分卷页动画

    我正在寻找一种方法来指示 uiview 上的 pagecurl 动画 以向用户提示他可以滚动某些页面 它应该是某种部分卷页 问题是我不知道该怎么做 我找到了一些教程 但仅适用于 Objective C 我不知道如何将其转移到 swift 中
  • NestJS:如何在自定义验证器中访问 Body 和 Param?

    我有一个场景 我需要来自两个值的值param and body执行自定义验证 例如 我有一条路线 photoId tag为照片添加标签 然而 在向照片添加标签之前 它必须验证是否已经存在与照片同名的标签 我的控制器中有以下路线 Post p
  • 了解执行 Google 数据存储区查询时出现的“CancellationException:任务已取消”错误

    我正在使用 Google App Engine v 1 9 48 在一些数据存储查询期间 我随机收到 CancellationException 任务已取消 错误 而且我不太确定到底是什么导致了这个错误 从other https stack
  • Dapper 和 SQL 注入

    Dapper 如何帮助防止 SQL 注入 我正在测试不同的 DAL 技术 必须选择一种来确保我们网站的安全 我倾向于 Dapper http code google com p dapper dot net 但需要一些帮助来了解安全性 Da
  • 替换 javascript 中的 JSON 键

    假设我有一个 JSON 对象 例如 var myjson com mycompany top Element com mycompany top count 10 com mycompany top size 0 我想用冒号替换键中的点 句
  • F3 更改 css 文件的相对 URi

    我是一个尝试 F3 的新手 我的示例应用程序基本上可以工作 但是对 css 文件的引用发生了更改并导致找不到 它看起来像 htaccess 问题 但我似乎无法修复它 我的 css 文件指定为 我的 htaccess 文件看起来像 Rewri
  • 为什么 UITextView 在调整大小后会在错误的框架中绘制文本?

    我陷入了某种魔力 当我尝试更改 UITextView 框架 在本例中使用 UISlider 时 文本会在比框架更小的其他区域中绘制 多次调整大小 有趣的是 如果我们在尝试使框架变大时滑动得足够快 文本就会绘制在非常正确的区域中 有人可以解释
  • 动态大小类型总是在堆上吗?

    我对 Rust 的学习让我了解了动态大小类型 DST 并且我知道这些类型的大小在编译时无法得知 例如 str 我现在的问题是 我说 DST 永远不能存在于堆栈上 它们只存在于堆上 这样说对吗 另外 另一方面 说大小类型可以存在于堆栈中是否正
  • GridView 排序仅有效一次

    我有一个网格 它仅按升序排序一次 然后什么也没有发生 aspx文件代码
  • 如何在 Swift 4 中创建一定大小的数组?

    如何制作一个包含 1000 个浮点数的简单数组 我已经尝试过这个 var computeArray Array
  • 如何从node.js缓冲区获取int

    是代码 var time new Buffer 506BF1E3 hex time toString Pk 0x506BF1E3 1349251555 UNIX时间 如何获取 1349251555 表格time缓冲 这个也能达到目的 通过使
  • SQL Server:过滤 sp_who2 的输出

    在SQL Server下 有没有一种简单的方法来过滤sp who2的输出 例如 假设我只想显示某个数据库的行 你可以尝试类似的东西 DECLARE Table TABLE SPID INT Status VARCHAR MAX LOGIN
  • 如何检查使用哪个编译器来构建Python

    有没有办法知道使用哪个编译器来构建Python安装在特定的linux机器上 我尝试使用ldd on the Python动态库 1 但我无法理解它是否是用gcc或英特尔编译器 1 ldd libpython2 7 so 1 0 linux
  • Clang 在 c++98 模式下使用 std::stoi 编译代码

    我需要用 C 98 编译我的 cpp 而不是我的学校项目的 C 11 所以我用了 std c 98编译 CPPFLAGS Wall Werror Wextra std c 98 但我犯了一个错误并使用了C 11std stoi功能 i st
  • 如何让浮动div居中?

    我想将下面模型中出现的三个 div 居中 全部都有 float left 这可能吗 我不介意有包装器div Text align center 和 display inline block 不适用于我的代码 如果你想让它们居中 你就不能浮动