将图像置于 css 圆的中心

2024-03-13

这是 CSS 圆圈中的图像。我希望圆圈围绕图像,因此图像应该位于中心。我怎样才能做到这一点?

HTML:

<div class="circletag" id="nay">
    <img src="/images/no.png">
</div>

CSS:

div.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
div.circletag.img {

}

使用该图像作为背景图像。

.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-image: url(no.png);
    background-position:50% 50%;
    background-repeat:no-repeat;    
}

如果您不想让整个外部 div 可点击,这可能会起作用:

.circletag {
    display: block;
    width: 40px;
    height: 40px;
    background: #E6E7ED;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;    
    text-align:center;
}

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

将图像置于 css 圆的中心 的相关文章

  • 如何使用scrapy Selector获取节点的innerHTML?

    假设有一些 html 片段 例如 a text in a b text in b b a
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 如何用纯JavaScript控制变换距离

    我做的http codepen io adamchenwei pen dOvJNX http codepen io adamchenwei pen dOvJNX 我尝试对 dom 应用某种移动方式 使其移动固定距离并停止 而不是动画并移动穿
  • 是否可以将整个“卡片”包装在 标记中?

    在我的网站中 我有 卡片 每张卡片都包含许多元素 图像 文本 日期等 这有点像 Twitter 中的推文卡 我希望整个卡片都是可点击的 应该是到另一个页面的链接 目前 我有顶级元素作为 a 标记和使用aria label and aria
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • 有没有办法根据渲染的字符串创建 DOM 对象?

    有没有办法从整个字符串而不只是innerHTML 创建DOM 对象 我有一个完整呈现的 DOM 形式的字符串
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • Mobile Safari (iPhone) CSS 垂直居中/行高 CSS 问题

    有一个问题 我一直试图在各个项目中解决 但运气不佳 我有一些divs 内的文本以 CSS 为中心 使用display block and line height 我也尝试过padding和固定的高度 通常 这些设置要么只是标题 要么有时是按
  • 所有事件的 HTML5 EventSource 监听器?

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • 我可以使用 Google Analytics 确定用户浏览器对 HTML5 的支持吗?

    Google Analytics 分析 是否能够检测访问浏览器的 HTML5 支持级别 我想知道我的访问者浏览器中有多少百分比支持 HTML5 目前 获取此数据的唯一方法是分析访问者的浏览器统计信息 然后尝试在每个浏览器自己的帮助页面上查找
  • 未捕获的类型错误:无法读取未定义的属性“prop”

    我有 6 个输入复选框 如果选中的复选框超过 3 个 则最后一个复选框将被取消选中 为了更好地理解 请参阅我之前的question https stackoverflow com questions 35195235 if checkbox
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr
  • 如何在html中设置按钮的文本大小

    您好 我想在我的网站上有一个按钮 并且我想调整按钮上的文本大小 我该怎么做呢 我的代码如下
  • 如何在不设置动画的情况下突然更改 CSS 动画中的属性

    这是我试图弄清楚的 但没有使用 51 关键帧作为实现更改的黑客方法transform origin 这里有一个小提琴演示 http jsfiddle net p7pswnpq keyframes spin 0 transform origi
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐

  • libcurl 回调 w/c++ 类成员

    取自libcurl 编程教程 http curl haxx se libcurl c libcurl tutorial html在 libcurl 网站上 libcurl 与 C 使用 C 时基本上只需要记住一件事 在连接 libcurl
  • 未注入通过 RequireJS 从 CDN 加载 Angular

    在我的项目中 我想使用 RequireJS 并引导我的应用程序 如下所示 requirejs config baseUrl scripts vendor paths jquery https ajax googleapis com ajax
  • CustomAttribute反映html属性MVC5

    希望找到一种方法 当在 MVC5 中使用 Custom 属性或最好使用 RegularExpressionAttribute 装饰模型中的属性时 html 控件将包含它作为控件的另一个属性 例如 class CoolModel Custom
  • Hibernate 查询语言中四舍五入到小数点后两位

    你好 有人可以帮我如何在 hql 中四舍五入到小数点后两位吗 我在网上找不到任何东西 以下是我的查询 Select p amount as amt p desc from pay p register r where r type 1 an
  • 将字符串中匹配的正则表达式值替换为字典中的正确值

    我有一根绳子 var text the animal jumped over the description fox 和一本字典 var dictionary animal dog description jumped 我正在编写一个函数
  • CSS:100% 字体大小 - 100% 是什么?

    有many http www alistapart com articles howtosizetextincss articles http www w3 org TR CSS2 fonts html font size props an
  • java.lang.NoClassDefFoundError: javax/servlet/ServletContextListener 错误

    您好 我的 struts1 spring 和 hibernate 集成中的动态 Web 应用程序是在 64 位计算机上开发的 它在 64 位计算机上运行良好 但在 32 位计算机上出现 jar 问题 并给出以下错误 SEVERE Error
  • 从 Google Chrome 自动生成 HAR 文件

    基本上我需要的是一种自动化的方法result以下操作 打开一个新选项卡 打开开发者工具中的网络选项卡 加载一个 URL 选择 全部另存为 HAR 通常 建议的解决方案涉及使用PhantomJS http phantomjs org brow
  • WAMP 的 MySQL 数据库文件驻留在哪里?

    我只是好奇 因为我开始学习 PHP 和 MySQL MySQL 的数据库和其他文件驻留在硬盘上的位置 我在 Windows XP SP2 平台上安装了 WAMP 从以下命令的输出中探索变量 mysql gt show variables l
  • Xamarin.Forms 中主从页面的母版页有多宽?

    根据屏幕尺寸 和设备习惯 母版页的宽度会有所不同 在手机上 它约为屏幕宽度的 80 而在平板电脑上 它似乎是一个恒定尺寸 如 320 dp 有人知道这个值的一般公式吗 我想用它在施工期间布置一些元素 当Width属性尚未设置 Edit I
  • 在 django 中使用 Context 时如何禁用 HTML 编码

    在我的 django 应用程序中 我使用模板来构建电子邮件正文 其中一个参数是 url 请注意 url 中有两个参数以 分隔 t loader get template sometemplate c Context foo bar url
  • ES6 Promise / Typescript 和 Bluebird Promise

    我有一个 nodejs typescript 2 项目并使用es6 promise https github com stefanpenner es6 promise包裹 现在我想摆脱额外的包 因为我可以直接在打字稿中定位 ES6 所以我删
  • Git和ssh授权

    我无法使用生成的 ssh 密钥登录 github 我已经按照本手册进行操作 http help github com linux key setup http help github com linux key setup但在步骤 ssh
  • 是否可以在任何现有的 onsubmit/submit 之前绑定一个 Submit() 函数?

    我有一个表格onsubmit属性 我需要绑定一个新的提交事件 并且需要在任何现有的提交函数之前执行该事件 下面的代码演示了这个问题
  • 嵌套砌体对象

    我正在尝试使用容器创建图形视图 因此 如果 A s gt B s gt C s 视图将显示 Bs 内的对象 c 而 Bs 又在 As 内 Something like this 我认为砌体视图非常适合此目的 但我无法使嵌套正常工作 到目前为
  • .NET Ionic.Zip:压缩或未压缩大小,或偏移量超过最大值

    我进行了以下设置 Win2008服务器 Ionic zip 参考模块 用于构建 zip 文件的单独驱动器 NET 4 0 Web 应用程序即时构建 zip 包 并允许客户端下载该包 该系统一直运行良好 直到现在 最近我们添加了一些较大的文件
  • git error“请告诉我你是谁。”和赫罗库

    我当时工作于branch master 并提交到 Git 存储库 一切都很好 我将新应用程序连接到 Heroku 上的这个存储库 我同时致力于 Heroku 和 Git 一切又恢复正常了 除了我无法在 Heroku 上运行 db migra
  • GAE - Python 3.7 - 如何登录?

    我有一个 python 3 7 中的谷歌应用程序引擎项目 我想在其中编写一些日志 我习惯在应用程序引擎 python 2 7 中编程 并且使用简单的代码 logging info hi there 将任何日志写入谷歌云日志控制台 上面的命令
  • 单击带有 codemirror 的按钮时如何撤消选定/突出显示的文本

    我有一个简单的 codemirror 文本编辑器 正在使用 bootstrap 进行工作 我可以单击粗体和代码按钮 确定 它会正确包装所选 突出显示的文本 问题一 当文本包含在标签中时 可以说 b something b 如果我再次选择 突
  • 将图像置于 css 圆的中心

    这是 CSS 圆圈中的图像 我希望圆圈围绕图像 因此图像应该位于中心 我怎样才能做到这一点 HTML div class circletag img src images no png div CSS div circletag displ