使用 Flexbox 在 Bootstrap3 轮播中垂直居中内容

2023-12-13

我试图将 h3 和 p 元素集中在 div 中,更准确地说是 Bootstrap 的 .carousel-caption 。我已经给 .carousel-caption 固定的高度和宽度。我试图将 h3 和 p 垂直对齐到 theid 父 div 的中心,如下所示:

           –––––––––––––––––––––––––––––––––––––––––––––––
           |.carousel-caption                            |
           |                                             |
           |                                             |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | |h3                                      |  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | |p                                       |  |
           | |                                        |  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           |                                             |
           |                                             |
           |                                             | 
           –––––––––––––––––––––––––––––––––––––––––––––––

我在这个小提琴中有代码http://jsfiddle.net/pYjnF/至少适用于 Chrome,但我正在尝试实现对桌面 C28+ FF22+ S6 IE10 的浏览器支持以及对 iOs 6+ safari 和 Android 4.0+ Chrome 的移动支持。

有什么建议么?


有一个提示来检查这个http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/事实证明,解决方案实际上简单得令人尴尬http://jsfiddle.net/pYjnF/1/

<div class="carousel-caption flex" style="display: flex; align-items: center;">
   <div> <!-- div which content is not aligned -->
      <h3>Headline lorem ipsum dolor</h3>
      <p>Story gnis dis dolor re niet, sed quia se perferciaes eossedit, susam, sam voluptas sandebi stiusam, cuptaturem sequis imi, is etur</p>
   </div>
</div>    
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Flexbox 在 Bootstrap3 轮播中垂直居中内容 的相关文章

  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 用于删除确认mvc的引导模式

    我正在开发一个 MVC 5 Web 应用程序 在我的一个 Razor 视图中 我有一个表 其中显示了几行数据 每行数据旁边都有一个 删除 按钮 当用户单击删除按钮时 我希望弹出 Bootstrap Modal 并要求用户确认删除 在 for
  • Bootstrap 的跨浏览器数字微调器/步进器 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个与 Twitter Bootstrap 2 3 集成的数字微调器 使用 HTML5input type number
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • 输入文本中固定下划线

    我试图修复所有输入文本类型中的下划线 但没有成功 Example My code input width 100 background color fcfcfc border 0 padding 10px div class col lg
  • 呈现为 Flexbox 的有序列表不显示项目符号/小数(项目也呈现为 Flexbox)

    我有一个有序列表 ol 有它的display属性设置为flex 列表项也呈现为弹性框 这样做会导致项目符号 数字 不再显示 有什么办法可以让项目符号显示在ol有课 questions questions likert 在40px的区域pad
  • 带 CSS 网格的等宽侧边栏列

    是否可以让左右列具有相同的宽度 而中间列占据剩余空间 我不想设置像这样的百分比grid template columns 20 60 20 因为并不总是确定这些列的内容是什么 Flexbox 和表格似乎没有解决这个问题的方法 所以我再次尝试
  • 当引导模式打开时如何防止正文内容滚动

    我正在使用 Angular UI Bootstrap模态框 http angular ui github io bootstrap modal 当模式打开时 主体有一个滚动条 当我滚动时 模式后面的内容也会滚动 我可以将溢出 隐藏到正文标记
  • 如何在 ASP.NET 按钮中使用 Twitter Bootstrap 图标?

    我怎样才能使用 i class icon etc i 带有 ASP NET 按钮 链接按钮 像这样
  • 在rails中使用Twitter Bootstrap jquery modal链接到另一个页面

    我只是希望这个模式出现并显示另一个页面的内容 但我无法让它工作 因为我是 Jquery 的新手 有没有办法修改下面的代码以便在模式弹出窗口中显示 contact 的内容 this content is on http myurl com c
  • 将 Flexbox 行设置为最短子元素的高度?

    我在使用 Flexbox 时遇到一些困难 目标是使行的高度与最短的子元素相同 以两张图片为例 一张的高度为 200px 另一张的高度为 120px 下面的示例按预期工作 img elements 是 flex 元素的直接子元素 row di
  • Bootstrap Typeahead:删除第一项的强制选择

    您好 我正在 Twitter Bootstrap 中使用 typeahead 我在这里发现 在自动完成下拉列表中 它默认选择第一个选项 我的要求是 最初它不应该选择任何内容 只有当我按下导航键 向上或向下 或将鼠标悬停在它上面时 它才会进入
  • 需要设计8个盒子,排成两排

    如何使用bootstrap设计如下8个盒子 Please 忽略颜色每个盒子都会类似于名片 它们应该只有 8 个盒子 排成两排 With 大屏幕中右侧和左侧的特定边距 and 不 小屏幕中的边距 所以在平板电脑中应该是 2 在移动设备中应该是
  • bootstrap-select 不代理点击事件

    我有选择元素
  • 将 PrimeNG 与 Bootstrap 4 结合使用

    目前 我正在为一个新的 Angular 2 项目使用 UI 库 我尝试了 Ng Bootstrap 和 Material 不幸的是它们仍处于 Alpha 和 Beta 阶段 我还检查了 PrimeNG 目前 PrimeNG 提供的组件比 M
  • 两列 Jekyll 布局,用标签分隔?

    我目前正在 Jekyll 博客上工作 我想将我的 Markdown 文件采用以下格式 div class row div class col md 6 div div class col md 6 div div 我希望我的代码块在一列中
  • React Native FlatList 样式

    我正在尝试获取列表的 HeaderComponent 旁边的 FlatList 项目 我希望房间从创建房间旁边开始 这是它的外观图像 1 https i stack imgur com qyZZP png https i stack img
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • Bootstrap下拉菜单文本颜色

    所以我第一次使用 Twitter 的 Bootstrap 我试图在下拉菜单折叠后更改其文本的颜色 如果有道理的话 I used 当您压缩网页以显示折叠菜单并转到下拉列表时 您会看到蓝色背景转移到下拉菜单项 但字体颜色为黑色 使其很难阅读 我

随机推荐

  • 使用 Symfony2 将 xml 反序列化为对象

    我通过 API 收集一些 xml 格式的数据 并希望将其反序列化到对象列表中 我正在使用 Symfony2 并找到 JMSSerializerBundle 但我真的不知道如何使用它 我知道 Sf2 允许将对象序列化到数组 从数组反序列化 但
  • 按钮 OnClick 事件在 ASP.NET Web 表单应用程序中不起作用

    我跟着本教程创建以下 ASP NET Web 表单以将参数发送到存储过程并使用 Microsoft Report 显示结果 this is 不完整 产品 aspx file
  • 读者单子的目的是什么?

    reader monad 太复杂了 而且似乎没什么用处 如果我没记错的话 在 Java 或 C 这样的命令式语言中 读者 monad 没有等效的概念 你能给我一个简单的例子并稍微澄清一下吗 别害怕 reader monad 实际上并没有那么
  • MySQL以不同的排序顺序对多列进行排序

    我有一个表 其中包含三个数据类型字段date int and bigint 我想使用所有这三列对我的选择查询进行排序 我想将它们全部按降序排列 例如 Select From mytbl order by date desc intnum d
  • 通道功能 V1_3 是必需的,但不支持:在 Hyperledger Fabric 中制作我的第一个网络

    在 OSX 上启动我的第一个 Hyperledger 网络 我使用脚本安装了示例文件 curl sSL http bitlyURLThatStackoverflow won t let me us bash s 1 2 1 The ran
  • Python 打包:pyproject.toml 中的构建需求 VS setup_requires

    在有点复杂的Python中setup py配置 通常需要已经存在的其他库才能执行setuptools setup 就我而言 这将是setuptools gt 45 0 and cython gt 0 29 现在 我有两个选项来声明这些构建时
  • Java 2d 鼠标点方向旋转

    到目前为止 我有一个java应用程序 我在其中画一个圆圈 玩家 然后在顶部画一个绿色矩形 枪管 我有它 所以当玩家移动时 桶会随之移动 我希望它找到鼠标指向的位置 然后相应地旋转桶 有关我的意思的示例 请观看我发现的这个视频http www
  • UWP 的 BroadFileSystemAccess 不起作用

    我正在编写一个应用程序 它需要访问文本文件的权限 因为未经许可它会抛出异常 访问被拒绝 我添加到 Package appxmanifest 特定行 xmlns rescap http schemas microsoft com appx m
  • pandas dataframe 选择多索引中的列[重复]

    这个问题在这里已经有答案了 我有以下 pd DataFrame Name 0 1 Col A B A B 0 0 409511 0 537108 0 355529 0 212134 1 0 332276 1 087013 0 083684
  • 正则表达式将 img 标签与特定属性类匹配

    我很长时间都在与这个正则表达式作斗争 但我找不到任何解决办法 我使用基于 javascript 的工具来测试和编写表达式 当放入php页面并与preg匹配时 结果是不同的
  • openssl - 通过 Java 解密

    全部 我正在努力解决这个问题 我有包含命令的bat文件 openssl smime decrypt binary inform DER recip path to certificate inkey path to private key
  • 重新安装 Visual Studio 2017 本地主机证书

    在安装 VS2017 的过程中 或者稍后 程序会安装一个用于本地开发的证书 一切都工作正常 直到我安装了 Fiddler 从那一刻起 VS2017 证书停止工作 每当我导航到本地主机应用程序时 我都会收到 您的连接不是私有的 消息 有什么想
  • 有没有办法使用最新的 Facebook 应用程序评论来获得 Facebook read_stream 权限?

    我正在开发社交网络 iPhone 应用程序 其中我们有 facebook 作为选项之一 我们必须显示用户的提要 但为此我需要read stream允许 不幸的是 我们的应用程序尚未经过验证 这是我们从 Facebook 审核团队收到的消息
  • 如何从因重新启动而离开的位置继续安装?

    在安装某些软件包期间重新启动后如何继续安装程序 实际上 我已经使用构建了一个项目的安装程序包WiX 捆绑包 有不同的包要安装在链中 但是当它安装微软时Windows安装程序4 5 msi 它将重新启动电脑 重新启动后 我希望安装继续 我怎样
  • 在python中使用bing或google API获取位置坐标

    这是我的问题 我有一个示例文本文件 我在其中通过抓取各种 html 页面来存储文本数据 该文本包含有关各种事件及其时间和地点的信息 我想获取这些位置的坐标 我不知道如何在 python 中做到这一点 我正在使用 nltk 来识别此示例文本中
  • Android - 方向变化时的动态片段问题

    我在动态片段方面遇到问题 如果我不改变方向 它就可以正常工作 当我改变方向时 我单击 ListView 项目 这不是改变 textview 这是 DynamicActivity 类 public class DynamicActivity
  • Selenium 无法启动 IE。

    Selenium 无法启动 IE 10 56 25 005 INFO org openqa selenium server SeleniumDriverResourceHandler Command request getNewBrowse
  • Angular HTTP 循环 [重复]

    这个问题在这里已经有答案了 我对 Angular 应用程序有疑问 我有一个包含语言短代码的数组 en fr 基本上 我希望 Angular 在该数组上循环并对每个值发出 HTTP get 请求 for var i in scope lang
  • 当内容类型为文本/纯文本时,.NET Core 1.0 Web Api 将请求正文处理为 JSON

    我需要使用的供应商 API 正在发送内容类型为 text plain 且正文中为 JSON 的 POST 请求 如何在 net core 1 0 web api中解析它 我确定我需要做类似的事情this 下面的代码 答案 但我不知道如何在
  • 使用 Flexbox 在 Bootstrap3 轮播中垂直居中内容

    我试图将 h3 和 p 元素集中在 div 中 更准确地说是 Bootstrap 的 carousel caption 我已经给 carousel caption 固定的高度和宽度 我试图将 h3 和 p 垂直对齐到 theid 父 div