如何在 twitter bootstrap 3 中居中 Youtube 视频(iframe)?

2024-04-15

您好,我正在尝试将 Twitter Bootstrap 3 中 Youtube 视频的 iframe 居中,目前它是左对齐的。

我使用了以下 html:

      <div class="embed-responsive embed-responsive-16by9">

      <iframe class="embed-responsive-item"  
       src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" 
       align="center" id="videothumbnail"></iframe>

       </div>

CSS:

    #videothumbnail{
    height: 50%;
    width: 50%;
    float: center;}

使用类col-xs-12 text-center。你不需要float:center;

所以改变这个:

<div class="embed-responsive embed-responsive-16by9">

to

<div class="embed-responsive embed-responsive-16by9 col-xs-12 text-center">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 twitter bootstrap 3 中居中 Youtube 视频(iframe)? 的相关文章

  • CSS - 当 Margin-Top 存在时,Margin-Bottom 被忽略

    我有一个场景 我有多个 DIV 与 margin top 和 margin bottom 堆叠在一起 但我发现当我有 margin top 时 margin bottom 被忽略 我无法解释这是如何发生的 html div class bo
  • Flex Slider 无法在手机上运行

    我在这个页面上使用 flexslider 的网站上工作 http www intensetomatoes co nz story timeline http www intensetomatoes co nz story timeline
  • 同位素 Jquery 插件布局问题

    我正在尝试在此站点上设置同位素 它需要处理布局 并且我需要能够将项目附加到容器中 问题是它似乎没有正确初始化图像 这是我初始化它的方法 document ready function var container container cont
  • font-awesome 字体未加载到 Angular 项目中

    我已经使用 Angular 5 一段时间了 似乎我无法将任何字体很棒的图标加载到我的构建项目中 我完全按照下面链接中提到的步骤进行操作 https www npmjs com package angular font awesome htt
  • 如何设计一个在 Firefox、Chrome 和 IE11 中看起来相同的单选按钮

    我想设计一组单选按钮 它们在 Chrome Firefox 和 IE 11 中看起来应该相同 我的解决方案在 Firefox 中看起来相当不错 在 Chrome 中 按钮周围有一个蓝色框 而在 IE 11 中 颜色和边框似乎无法识别 它应该
  • 如何向 hr 标签添加一些文本?

    我试图在 hr 标签末尾添加一些文本 但到目前为止我还没有设法让它正常工作 我期待有一行 顶部有一些文字到最后 你可以在这里看到我的小提琴http jsfiddle net 2BHYr http jsfiddle net 2BHYr Edi
  • 如何防止在 CSS 中调整图像大小?

    我有以下代码来创建图像库 他们需要做出反应 但问题是 当窗口宽度发生变化时 图像也会调整大小并失去纵横比 我怎样才能解决这个问题 我是 CSS 新手 padding 0 margin 0 HEADER STYLES header width
  • CSS - 显示:无;不工作

    我正在尝试开发一个移动样式表 在这个样式表中我想删除一个特定的 div 在div的HTML代码中 我放置了一个名为 tfl 的id 如下所示 div style display block width 187px height 260px
  • 如何更改同一行元素的位置

    我有一个包含 3 个元素的块 最小值 产品库存 最大值 我需要做的就是找到一种方法将产品库存调整到两个值之间 我的猜测是问题应该出在这些线上 div class max inline parent div class inline bloc
  • CSS:下拉菜单的间距问题

    我做了一个下拉菜单 http jsfiddle net QPxVe http jsfiddle net QPxVe 由于某种原因 jsFiddle 正在改变 jsFiddle 之外不存在的对齐方式 这不是问题 我似乎在项目之间有差距 但我不
  • 如何在 Mac 上的 Safari 中删除所选元素的光泽?

    在 Mac 和 iOS 设备上的 Safari 中
  • 如何在两个 960.gs 框之间添加垂直线?

    我正在使用 960 gs 网格系统进行设计 在两个盒子之间添加一条细细的分隔垂直线的最佳方法是什么 宽度和颜色应该是可调的 我的计划是定义几个具有绝对位置和背景颜色的 div 类 每个可能的位置对应一个 并使用 JQuery 确保它与周围的
  • 将 PhotoSwipe 配置为不使用整个窗口?

    我目前正在尝试使用构建移动图片库照片滑动 http photoswipe com 我已经能够让它工作了 但有一个小问题 当我 单击照片缩略图 实际照片总是占据整个 视口 当您在移动设备上查看图库时 这是可以的 但是 如果您的视口是计算机屏幕
  • Firefox 中的相对位置[重复]

    这个问题在这里已经有答案了 可能的重复 Firefox 是否支持表格元素上的position relative https stackoverflow com questions 5148041 does firefox support p
  • 显示文本,一条虚线,然后显示跨越页面宽度的更多文本[重复]

    这个问题在这里已经有答案了 我想要显示一些文本 然后是虚线 然后在同一行上显示更多文本在 HTML 页面上 例如 Name Engineer 我希望 名称 与左边框左对齐 工程师 与右边框右对齐 然后浏览器能够用重复的点填充两者之间的间隙
  • 将背景图像保留在底部

    我一直在研究将图像保留在底部页面的解决方案 我目前得到的代码是 footer background image url images footer png background repeat repeat x position absolu
  • 悬停时连续 CSS 旋转动画,悬停时动画回到 0deg

    我有一个元素 当你将鼠标悬停在它上面时 它会无限旋转 当您将鼠标悬停在外面时 动画就会停止 简单的 webkit keyframes rotate from webkit transform rotate 0deg to webkit tr
  • 在 Java、Android 上从 Youtube 下载视频的代码

    我创建了从 Youtube 下载视频的代码 但此代码不适用于 Wi fi 连接 但适用于移动连接 我哪里有错误 import java io File import java io FileOutputStream import java
  • 仅使用 url 嵌入视频

    给定一个 youtube url 我如何使用 net c 将视频嵌入到页面中 只需添加如下一行 将 autoplay 设置为 0 或 1 取决于您是否希望人们真正留在您的页面上
  • 获取 Youtube 上的游戏直播列表

    我正在尝试使用 Youtube 数据 API 来获取当前与游戏相关的直播流列表 但我找不到任何符合我需要的端点并返回每个频道的观看者数量 你们知道我该如何做到这一点吗 Thanks 游戏直播列表 videoCategoryId 20 是 游

随机推荐