将图像置于 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 圆的中心 的相关文章

  • 我可以在元标记中使用 HTML 字符实体吗?

    我有一个有两种语言的网站 英语和中文 在使用 UTF 8 字符集的英文主页中 我有 例如 这出现在搜索结果中 我想将其更改为 在哪里 20013 25991 是 中文 的 ISO 实体 搜索结果中会显示为 中文 吗 我无法将 中文 直接粘贴
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • jQuery:离线后 POST 出错(iOS 和 Chrome)

    我构建了一个具有离线功能的 HTML5 Web 应用程序 使用 AppCache 程序流程为 Online 在网络上时 应用程序预加载一些基本信息 工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • html 选择列表 - 通过传入变量获取文本值?

    我有一个显示列表语言的选择列表
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 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