当对象大于视口时,CSS 居中

2023-11-30

我试图让 jquery 轮播位于屏幕中央,即使剪切区域比视口更宽。这基本上总是给元素一个负的左边距——我该如何指定呢?剪切区域的宽度是固定的,但视口区域当然是可变的。


这是我能找到的最佳解决方案,在固定宽度内容周围使用环绕元素,然后在内容本身上使用 -50% 的边距。这不是我的想法,但它应该足以让你开始。这是代码片段:

div.wrapper {
    position: absolute;
    left: 50%;
}
.content {
    position: relative;
    margin-left: -50%;
}

<div class="wrapper">
    <div class="content">JQUERY BIZ-NASS HERE</div>
</div>

当然,这假设您的 div 是body标签,并且您的浏览器指定body宽度为 100%,没有边距或填充。

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

当对象大于视口时,CSS 居中 的相关文章

  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • 如何获得 CSS 变量引用的颜色装饰以在 VS Code 中工作?

    我正在研究 CSS 自定义属性及其修改 似乎将 alpha 通道添加 更改为颜色的最佳方法是使用hsl符号 root green 120deg 100 50 box background hsl var green 0 5 这种方法的问题是
  • jQuery / CSS3 动画阴影效果

    所以这个问题可能会被否决 但我认为有人可能会提供帮助 我正在寻找的效果是蓝色块像气球一样上下盘旋 当块上 下移动时 阴影在其下方不断增大和缩小 关于如何编程的任何想法 或者有人知道可以完成的教程 插件吗 你可以使用 jQuery 来完成 或
  • 禁用 Bootstrap 中的链接

    第一个例子没有成功 我需要始终有一个列表来禁用链接 或者我的第一个演示有什么问题 a class disabled href Disabled link a ul class nav nav pills li class disabled
  • 浏览器特定的 CSS 属性

    在哪里可以找到完整的 浏览器特定 css 属性 参考 我的意思是一些属性 例如 moz border radius这仅适用于 Firefox 或 webkit min device pixel ratio 这些示例仅适用于指定的 Web 浏
  • 何时使用
    换行符 vs CSS 定位?

    我经常想知道如何正确使用 br 越线 似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容 W3schoools org 说使用 br 适用于空白行 但不适用于创造或分离 http www w3schools com tags tag
  • 如何更改引导弹出窗口箭头边框颜色而不填充它?

    我想更改弹出箭头的边框颜色 当我应用边框颜色时 箭头本身填充了颜色 我只想为弹出框主体的箭头边框提供颜色 p Click on button to see Popover p a href class btn btn primary pop
  • 当我尝试转发电子邮件时,时事通讯无法隐藏 Gmail 上的响应内容

    我正在尝试写一份时事通讯 但当我测试时 我无法隐藏响应式内容GMail On Outlook and Yahoo一切正常 但如果我尝试转发电子邮件 隐藏的内容就会可见 我测试使用 putsmail https putsmail com gt
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • CSS:在 hsla 中使用 hsl 变量?

    假设我有一个 CSS 变量hsl定义如下 white 1 hsl 0deg 0 100 现在 我想使用相同的白色 但不透明度为 50 所以 像这样 white 2 hsla 0deg 0 100 50 有没有办法使用第一个变量 white
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • 为什么连字符 (-) 分隔的类名在 CSS 中广泛使用 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在浏览了一些网站和其他一些广泛使用的插件和框架中包含的一些 CSS 文件时 发现它们广泛使用连字符分隔的单词作为类名 实际上使用这样的类名有什么
  • 我无法注入带有“!important”规则的样式[重复]

    这个问题在这里已经有答案了 我尝试使用以下代码注入样式 document body style color green important Per CSS 级联引用 http www w3 org TR CSS2 cascade html
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • 为 Gmail 设计 HTML 电子邮件

    我正在生成一封使用内部样式表的 html 电子邮件 即 h2 class foo Email content here 在 Gmail 中查看时 内部样式表中的所有样式似乎都被忽略 Gmail 似乎忽略了内联规则以外的所有样式 例如 h2
  • 如何更改 div 悬停时的跨度颜色

    我正在尝试更改 div 悬停时跨度的颜色 如何使红色汉堡按钮 即跨度 在 div 悬停时将颜色更改为黑色 PS 现在它在跨度的悬停上执行此操作 JSFiddle https jsfiddle net bjjbqct8 https jsfid
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出

随机推荐

  • Angular 2 继承以启用禁用 Ionic 菜单滑动

    我的问题 我的应用程序包含一个支持滑动的菜单 在登录屏幕上 如果我滑动 我可以看到不正确的菜单 我想禁用不包含菜单图标的页面的菜单滑动 例如登录 包含后退按钮的内部详细信息页面等 找到解决方案 我可以通过以下链接来做到这一点 https s
  • 了解使用 LCP 数组进行模式匹配的算法

    前言 我的问题主要是一个算法问题 所以即使你不熟悉后缀和LCP数组 你也可以帮助我 In this论文描述了如何有效地使用后缀和 LCP 数组进行字符串模式匹配 我了解 SA 和 LCP 的工作以及如何改进算法的运行时间O P log N
  • 如何在android中绘制六边形?

    我在中使用了六边形代码本教程并创建了一个 createHex 类 我应该发布代码吗 链接的网页使用以下代码使用 createHex 中的数学实际绘制六边形 Override public void paint Graphics g for
  • Az 应用程序/主体的租户 Azure 登录失败,并显示“未找到订阅”消息

    我有一个名为 account1 的天蓝色帐户 我在其中创建了一个跨租户可见性的应用程序 主体 然后我给它一些 API 权限 我有另一个天蓝色帐户 account2 我需要使用此应用程序访问资源 我通过访问以下网址完成 account2 的管
  • 如何在生产环境中的 SSRS 中部署自定义程序集

    我创建了一个自定义程序集 该程序集使用第三方程序集 我已在本地计算机中部署了自定义程序集 但现在 我应该如何在生产环境中部署报表和那些程序集 是否有可用的自动化 向导流程 您需要将该程序集复制到生产服务器中Microsoft SQL Ser
  • 如何修复 Python ValueError:bad marshal data?

    在 Ubuntu 中运行 flexget Python 脚本 出现错误 flexget series forget Orange is the new black s03e01 Traceback most recent call last
  • 如何在 Nuxt 中使用私有 API 密钥(在客户端)?

    问题解决了 如果您遇到同样的问题 请查看已接受的答案 这是使用 serverMiddleware 实现它的一种方法 我正在使用需要私钥的 API 我已将密钥存储在 env 文件中 并在 nuxt 配置文件中调用它 如下所示 privateR
  • 如何使用 R 中的最大似然模型将非线性函数拟合到 ggplot2 中的数据?

    数据集 x test y test 是指数拟合 我正在尝试适应自定义非线性函数 并附上代码 常规点图很好 但我无法使拟合线发挥作用 有什么建议么 x test lt runif 50 2 8 y test lt 0 5 x test df
  • 如何处理 socket.io 客户端聊天应用程序中的页面重新加载

    我正在实现一个聊天应用程序 我不在服务器中 包含 javascript 文件的页面可以是文件系统上嵌入了 javascript socket io 的任何 html 页面 现在的问题是 根据定义 页面重新加载总是会触发新的请求 从而产生新的
  • 如何从辅助方法设置变量以包含在 SASS SCSS 样式表中?

    我有一个辅助方法 可以检索需要进入 SASS scss 样式表的字符串 如果我在视图中调用该方法 它工作正常 但似乎 sass 需要一个变量 似乎如果我尝试在控制器中设置一个 var 并认为这最初是正确的方法 我无法在任何地方看到该 var
  • Perl:匹配时空 $1 正则表达式值?

    读者们 我有以下正则表达式问题 code usr bin perl w use 5 010 use warnings my filename input txt open my FILE lt filename or die while m
  • 剂量响应 - 使用 R 进行全局曲线拟合

    我有以下剂量反应数据 希望绘制剂量反应模型和全局拟合曲线 xdata 药物浓度 ydata 0 5 不同药物浓度下的响应值 我毫无问题地绘制了标准曲线 标准曲线数据拟合 df lt data frame xdata c 1000 00 30
  • 从 C# 代码调用 delphi DLL 方法

    我正在尝试从 C ASP NET 代码调用 Delphi 函数 该函数的声明如下所示 function SomeFunction const someString SomeOtherString string OleVariant 从我的
  • 我如何洗牌并向玩家一次一张发牌?

    这就是我到目前为止所得到的 发现自己陷入困境 Private Sub Dealbtn Click sender As Object e As EventArgs Handles Dealbtn Click Dim Suits As Stri
  • 如果数组包含 2 或 3,则返回 True

    我遇到了这个 CodingBat 问题 给定一个长度为 2 的 int 数组 如果它包含 2 或 3 则返回 True 我尝试了两种不同的方法来解决这个问题 谁能解释我做错了什么 This one says index is out of
  • ValueError:地下矩形外表面积

    我正在制作一款相机跟随玩家的平台游戏 我试图通过在整个地图上拥有一个大的表面并且只传输放大的部分来实现这一点 但是我只能获得 30 fps 最小化 和 8 fps 全屏 所以我尝试优化它是在位块传输之前裁剪它 但我得到ValueError
  • 是否有用于电话状态的 NSNotification

    当设备打开 关闭手机时 我们是否可以观察到 NSNotification The NotificationCenter不会发出任何有关此的通知 但请看一下CTCallCenteriOS 4 中引入的类 它有一个callEventHandle
  • R 按键分组获取多列的最大值

    我想做这样的事情 如何使R中的A列唯一并保留B列中具有最大值的行 除了我的data table有一个键列和多个值列 所以说我有以下内容 a b c 1 1 1 1 2 1 2 1 3 1 2 2 4 2 1 1 5 2 2 5 6 2 3
  • Perl - 在关联数组单词和单词上下文中查找并保存

    我有一个像这样的数组 这只是一个小概述 但它有 2000 行及更多这样的行 list affaire chose question cause chose mati re 我想要这样的输出 te affaire gt chose quest
  • 当对象大于视口时,CSS 居中

    我试图让 jquery 轮播位于屏幕中央 即使剪切区域比视口更宽 这基本上总是给元素一个负的左边距 我该如何指定呢 剪切区域的宽度是固定的 但视口区域当然是可变的 这是我能找到的最佳解决方案 在固定宽度内容周围使用环绕元素 然后在内容本身上