使用 CSS 将图像水平居中

2023-12-07

我正在尝试使用 css 将图像水平居中。

我使用以下 HTML 代码在屏幕上显示我的图像:

<div id="loading" class="loading-invisible">  
    <img class="loading" src="logo.png">
</div>

我正在裁剪图像,因为我只想显示部分图像,并且使用以下 css:

img.loading 
{
position:absolute;
clip:rect(0px,681px,75px,180px);
}

但是,我不知道如何在裁剪图像后将其居中。

有人能帮忙吗?


在你的 CSS 中试试这个:

.center img {        
  display:block;
  margin-left:auto;
  margin-right:auto;
}

然后添加到您的图像以使其居中:

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

使用 CSS 将图像水平居中 的相关文章

  • 如何将 HTML 转换为 Markdown?

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu
  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • 使用 PowerShell ADSI 提供程序 WinNT 查询的备用凭据

    我想做什么 你好 我正在编写一个可以接受 2 个参数的脚本 ComputerName 和 CheckWhatFile 然后 该脚本将访问 ComputerName 指定的计算机 文件服务器 并查找 CheckWhatFile 的打开文件句柄
  • 如何使用新的 CodeModule 从模板复制 ExcelWorkSheet

    我在复制时遇到问题ExcelWorkSheet以及相应的CodeModule复印表的 让我解释 设想 我有一个带有宏的 Excel 文件 xlsm 我使用此 Excel 文件作为模板来创建另一个 Excel 文件 数据将复制到新文件中 因此
  • 使用模板移动运算符

    我有一个模板类 我想避免复制它 因为这样做的潜在成本 我可以实现移动构造函数 但我也想允许移动 跨模板参数 这是我正在尝试编译的内容 template
  • MVC 处理站点的 CorpId

    我不确定我是否以正确的方式处理这个问题 但由于我遇到了问题 我认为我没有 加载登录屏幕时 我必须发送公司 ID 看起来像这样 public ActionResult LogOn string id var sb new StringBuil
  • 使用 Selenium Java 测试用例调用 CLICK 时获取“org.openqa.selenium.ElementClickInterceptedException”

    我正在 Katalon Selenium IDE 中使用以下 java 代码 import java util regex Pattern import java util concurrent TimeUnit import org ju
  • 使用 Jade/Express.js 渲染表,每行有多个元素

    我正在尝试使用简单的对象数组中的玉来渲染表格 但我不想简单地为每个对象渲染一行 而是想在每一行上渲染三个对象 table thead thead tbody tr td obj0 td td obj1 td td obj2 td tr tr
  • Pygame 鼠标位置不够精确,无法旋转 3D 场景

    我需要使用鼠标位置旋转 3D 场景或角色 例如 如果我将鼠标移动到右侧 我想向右转 角色应该向右转 我见过很多游戏将鼠标放在屏幕中央 然后获取其相对于前一帧的位置 相应地更新游戏并将鼠标移回中央 我尝试复制这一点 但遇到了 pygame 无
  • Play 2.0框架-POST参数

    我正在尝试将参数发布到操作 并在路线中写入 Home page GET controllers Application index POST login name password controllers Application login
  • GetDIBits 中的 HDC 有何用途?

    我正在使用GetDIBits将位图数据从屏幕兼容设备上下文获取到某种格式的 DIB 中 我的印象是 只有当源位图为每像素 8 位或更少时 才需要 DC 来合成颜色表 由于我的源位图是完整的 32 位彩色图像 并且这是一个一次性程序 并且我没
  • cin 会将键盘输入的 \n 识别为换行符吗?

    我是 C 的初学者 所以如果这个问题听起来很愚蠢 我很抱歉 我编写了这个小程序来帮助我熟悉cin include
  • 如何回滚 gatsby 版本?

    一位同事从我们的一个项目中提取了一个盖茨比存储库 并运行了一些他不应该执行的命令 现在他已经在 gatsby 1 项目上安装了 gatsby 2 不用说 一切都坏了 奇怪的是 我很难找到如何在他的本地计算机上回滚 有人知道如何回滚 gats
  • 检测 iOS 应用程序使用的语言

    如何检测当前应用程序的语言 我不是在谈论NSLocale用户偏好 在我的应用程序中 当前支持两种语言 默认的 en 和特定的 it 我只是想知道哪一个正在实际使用 如果相关的话 作为进一步的解释 我将通过仅针对两种支持的语言的 Web 服务
  • 使用 PHAsset 获取用户照片库时如何分页

    我问同样的问题here我不明白如何实施解决方案 我尝试过以下方法 fileprivate func fetchPhotos indexSet IndexSet let allPhotos PHAsset fetchAssets with i
  • 从 Java BitSet 中随机选取 n 位中的 k 位

    如何准确挑选k来自 a 的位Java位集长度m with n位打开 其中k n m Example input m 20 n 11 Example output k 3 天真的方法 选择一个随机数0 i m 1 如果在输入端打开但在输出端未
  • WPF 数据绑定未更新?

    我有一个项目 我将复选框的 IsChecked 属性与代码隐藏中的 get set 绑定 但是 当应用程序加载时 由于某种原因它不会更新 出于好奇 我将其精简到最基本的内容 如下所示 using statements namespace N
  • 如何在画布上绘制平滑的线条而不清除它?

    I have a canvas that is adding dynamically to the page on on load I want to draw user s mouse path on the canvas but I f
  • mxGraph:使用 XML 创建图表

    我正在尝试从 xml 文件创建图表 我的 JavaScript 代码是 function loadXML console log Inside loadXML var doc mxUtils parseXml
  • 在 C++ 类中初始化数组和可修改的左值问题

    我有一个基本的 C 类 标题如下所示 pragma once class DataContainer public DataContainer void DataContainer void int getAgeGroup void int
  • Pandas 比较下一行

    我有一个像这样的数据框 d d z Q8 Q8 Q7 Q9 Q9 d t 10 30 10 31 10 38 10 40 10 41 d qty 20 20 9 12 12 我想比较第一行和第二行 数量与下一行相同并且 下一行中的 t 更大
  • 使用 CSS 将图像水平居中

    我正在尝试使用 css 将图像水平居中 我使用以下 HTML 代码在屏幕上显示我的图像 div class loading invisible img class loading src logo png div 我正在裁剪图像 因为我只想