首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将svg居中对齐到具有灰色背景的按钮

将SVG居中对齐到具有灰色背景的按钮可以使用CSS来实现。首先,确保SVG标签嵌套在按钮标签中。然后,可以使用Flexbox布局或相对定位来实现居中对齐。

使用Flexbox布局的方法如下:

HTML代码:

代码语言:txt
复制
<button class="button">
  <svg>
    <!-- SVG图形的代码 -->
  </svg>
</button>

CSS代码:

代码语言:txt
复制
.button {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  background-color: #ccc;
  width: 200px;
  height: 50px;
}

使用相对定位的方法如下:

HTML代码:

代码语言:txt
复制
<button class="button">
  <svg>
    <!-- SVG图形的代码 -->
  </svg>
</button>

CSS代码:

代码语言:txt
复制
.button {
  position: relative;
  background-color: #ccc;
  width: 200px;
  height: 50px;
}

.button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这样,SVG图形就会居中对齐到具有灰色背景的按钮上。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

margin: 14px 0 0 15px; } 右侧登录按钮 , 尺寸也是 40 x 44 大小 , 该按钮盒子通过定位设置 ; 右侧按钮直接写上 " 登录 " 两个字 , 垂直居中 , 行高 =...内容高度 , 即可设置文字垂直居中 ; css 样式实例 : .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置左侧 使用绝对定位进行设置 */..., 需要设置 7 像素 上边距 , 使得该搜索栏可以垂直居中 ; 如果为中间搜索栏盒子设置一个 7 像素外边距 , 会导致外边距塌陷 , 左右两侧按钮都带下来 ; 外边距塌陷解决方案是 为 父容器...1 像素大小 盒子实现 , 宽度 1 像素 , 高度 15 像素 , 背景灰色 ; 可以通过 ::after 伪类插入上述盒子 , 使用绝对定位设置该盒子位置 , 注意 子绝父相 , 子元素绝对定位...可以设置宽高 */ display: block; /* 盒子模型尺寸为 1 x 15 像素 */ width: 1px; height: 15px; /* 设置盒子灰色背景

2K30

16个小UI设计规则却能产生巨大影响

此外,避免使用纯黑色文本,采用较暗灰色可以提高可读性并减少眼部疲劳。最后,文本左对齐,并确保正文文本具有适当行高,增强可读性。...低对比度按钮风险在于,低视力的人可能无法识别它是一个按钮,因为他们看不见按钮形状。按钮对比度比率提高3:1以上,使按钮具有可访问性,同时也有助于修正视觉层次。...箭头和按钮对比度提高3:1以上,我们得到了以下设计。我们正在一点一点地接近目标,但还有更多问题需要解决。...因此,为了最佳可读性,最好保持文本左对齐。对于较长正文文本,最好避免居中对齐或两端对齐文本。这种对齐方式更难阅读,尤其对于认知障碍的人来说。 居中对齐适用于标题和短文本,因为可以快速阅读。...然而,居中对齐会使较长正文文本更难阅读,因为每行起始点不断变化。你眼睛需要更努力地找到每行起始点。 在我们例子中,属性描述文本采用了居中对齐

34320
  • Bootstrap基础学习笔记

    每列左右间隙各15px .col-{112} 定义在所有屏幕下列宽 .col-{sm|md|lg|xl}-{112} 定义在指定屏幕下该列占据列宽,sm:屏幕>=576px、md:屏幕>=720px....text-left 左对齐 .text-right 右对齐 .text-center 居中对齐 .text-justify 两端对齐 .text-nowrap 段落中超出屏幕部分不换行 .text-lowercase....text-secondary 副标题 .text-white 白色文本(白色背景上看不清楚) .text-dark 深灰色文字 .text-light 浅灰色文本(白色背景上看不清楚) 【表格标签....float-left 图片左对齐 【容器类】 .container 居中容器类,最大宽度默认为1200px。....jumbotron 创建一个大灰色圆角背景框 .jumbotron-fluid 创建全屏没有圆角背景框 【信息提示】 .alert 基类 .alert-{success、info、warning

    4.9K31

    【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

    */ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...该布局最大 640 像素 */ max-width: 640px; } .search-btn { /* 左侧按钮布局 */ /* 左侧按钮需要设置左侧 使用绝对定位进行设置...margin: 14px 0 0 15px; } .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置左侧 使用绝对定位进行设置 */ position...像素外边距 左右 50 像素外边距 */ margin: 0 50px; /* 左侧和右侧设置为 15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置...可以设置宽高 */ display: block; /* 盒子模型尺寸为 1 x 15 像素 */ width: 1px; height: 15px; /* 设置盒子灰色背景

    1.7K20

    UI界面视觉平衡终极指南

    那么,如何对齐背景纯文本或段落呢? 这取决于背景视觉密度。如果是浅色背景,我们可以突出显示段落与其他文本对齐。 ? 由于背景是浅色,所以不会中断或干扰我们阅读体验。 ?...我们再来看视觉对齐另外一种情况——文字与按钮对齐。看看下面按钮文本,它们看起来都居中是吗? ? 诀窍是,我右边按钮文本向左移动了一点,因为右边边是三角形。...你应该已经注意左边不平衡了,这是因为不同对齐方法。第一种,是矩形对齐方法,这当然是没错,因为你切出来svg/png就是矩形,工程师开发时看到也是矩形。...播放按钮也是一样,如果你直接对齐这些形状,那么它们看起来会很奇怪。 ? 如果你想让三角形位置在视觉上更平衡,那么就把它圈起来,然后这个圆与按钮背景对齐。 ?...- 要点: 具有尖锐边缘形状应该更大或更长,以便与相邻矩形保持平衡。 用大写高度对齐法通常是对齐文字与背景按钮有效方法。 要让三角形图标与按钮对齐平衡,可以用其外接圆与背景按钮对齐

    2.5K40

    【移动端网页布局】流式布局案例 ⑤ ( 连续排列链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    */ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...该布局最大 640 像素 */ max-width: 640px; } .search-btn { /* 左侧按钮布局 */ /* 左侧按钮需要设置左侧 使用绝对定位进行设置...margin: 14px 0 0 15px; } .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置左侧 使用绝对定位进行设置 */ position...像素外边距 左右 50 像素外边距 */ margin: 0 50px; /* 左侧和右侧设置为 15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置...可以设置宽高 */ display: block; /* 盒子模型尺寸为 1 x 15 像素 */ width: 1px; height: 15px; /* 设置盒子灰色背景

    3.5K20

    BootStrap基础知识

    对齐 / .text-center 居中 / .text-right 右对齐 / .text-justify 设定文本对齐,段落中超出荧幕部分文字自动换行。...table-light 浅灰色,可以是表格行背景 table-dark 可以是表格行背景 其他类 类名 作用 thead-inverse 给表头添加黑色背景 thead-default 给表头添加灰色背景...内容内容内容内容内容内容 Jumbotron(霸屏)会创建一个大灰色背景框,里面可以设置一些特殊内容和信息。...如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类。...nextWhenVisible 如果页面或是其父层不可见,就停止轮播循环下一个。在目标项目显示前回传给调用者。 to 轮播指向特定索引。(与数组相同,从 0 开始).

    26310

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    */ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...该布局最大 640 像素 */ max-width: 640px; } .search-btn { /* 左侧按钮布局 */ /* 左侧按钮需要设置左侧 使用绝对定位进行设置...margin: 14px 0 0 15px; } .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置左侧 使用绝对定位进行设置 */ position...像素外边距 左右 50 像素外边距 */ margin: 0 50px; /* 左侧和右侧设置为 15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置...可以设置宽高 */ display: block; /* 盒子模型尺寸为 1 x 15 像素 */ width: 1px; height: 15px; /* 设置盒子灰色背景

    3.3K40

    如何使用 Tailwind CSS 设计高级自定义动画

    在第二个 div 内,有另一个具有居中、大小调整、脉冲动画效果和灰色背景颜色 div 元素。 我们在父元素 div 上应用了 animate-bounce 类,因此所有内部元素都具有默认弹性效果。...5、旋转点状正方形 这个动画代码由一个旋转圆角矩形形状组成,表示某种活动或加载。该矩形框具有虚线灰色轮廓,以增加视觉效果。...outline-dotted , outline-2 和 outline-gray-500 类内部 div 应用了一个宽度为2个单位虚线灰色轮廓。...在第二个 div 内,有一个带有XML命名空间、视口框和类属性 svg 元素。 h-16 和 w-16 类设置SVG高度和宽度, fill="green" 属性SVG填充颜色设置为绿色。...在内部 div 中, h-14 、 animate-[flip_5s_infinite] 和 bg-red-100 类代表容器内内容具有14个单位高度,红色背景色,并应用了“翻转”动画效果,使其垂直来回连续旋转

    1.4K20

    scetch入门 第2部分:文本,对齐SVG在第3部分中了解如何导出文件

    背景 这是本教程第1部分延续。在本部分中,我们介绍文本工具,对齐以及在Sketch中使用导入矢量图形。 文字和对齐方式 好吧,让我们打开插入菜单并写一些文字! ? 添加文字 我写了“香蕉”。...选择文本后,查看屏幕右侧Inspector。使字体大小为36,文本对齐中心和填充颜色为白色。 ? 编辑文字 如您所见,文本不是相对于矩形居中。要解决此问题,请按住Shift并同时选择矩形和文本。...选择两个对象 接下来,找到Inspector顶部Align按钮,然后选择下面列出两个按钮。这些是水平对齐和垂直对齐。 ? 水平和垂直对齐 现在让我们在页面的白色部分添加一些文本。...我使用了24号Avenir,对齐中心。确保在对齐设置中将其水平对齐画板中心。 导入向量 让我们学习如何导入矢量文件并进行编辑。...下载并解压缩SVG文件后,将其直接拖到Sketch画板中。 ? SVG拖动到画板 选中图标后,让我们在屏幕左侧“图层”菜单中进行一些调查。

    4.1K30

    ❤️创意网页:经典透明登录页面(好看易学易用)

    在本教程中,我们学习如何使用HTML和CSS创建一个漂亮登录页面。这个登录页面具有简单设计和透明登录框,能够与任何网站或应用程序相配合。...在标签中,我们设置网页标题为"Login Page"。 接下来,在标签中,我们创建一个具有类名为"container"元素,用于居中我们登录框。...首先,我们设置了整个页面的字体和背景。我们选择了Arial字体作为主要字体,并将背景颜色设置为漂亮灰色(#f2f2f2)。...接下来,我们定义了"login-box"类,设置了登录框背景颜色为白色,并添加了圆角和阴影效果。此外,我们为标题设置了居中对齐,并为输入字段和登录按钮设置了样式。...我们使用了简单HTML结构和CSS样式来设置页面的布局、字体、颜色和背景。我们还学习了如何背景图像应用于页面,并将登录框设置为透明。你可以根据需要对代码进行修改和扩展,以满足你具体需求。

    1.1K10

    六、WebApp 二手信息站点页面制作(IVX 快速开发教程)

    我们根据基本 行 和 列 制作网站标题头: 我们可以看到,该标题头可以当做是两个行,左侧一个、右侧一个;在此可以者两个内容放在一个行中,这两个行宽度各为 50%,左侧行 水平对齐 为 左对齐,...水平对齐 为 右侧对齐,垂直对齐 均为 居中: 接下来在 标题左侧行 中添加两个文本,修改文本属性后即可完成更改颜色: 在此你可能对该文本紧贴左侧边缘并不喜欢,可以更改该文本属性中 左外边距...、背景色进行修改: 此时标题栏即可制作完成: 但为了更好使这个页面看起来有层次感,我们可以修改当前信息展示页 背景色 为淡暗灰色,颜色代码为 #F8F8F8,修改后页面看起来更加美观: 6.1.2...在这里我们需要注意,该部分距离左侧与右侧有一定距离,此时我们需要创建一个行,命名为广告块;接下来设置这个 海报块行 水平对齐居中,在其内部创建一个子组件 行容器 命名为 广告内容,设置宽度为 90%...名为 登录块,再到 登录块行 中创建一个名为登录内容 行组件,在登录内容行中创建 4 个 行组件,分别用作用命名包裹按钮与文本,设置 水平对齐居中 即可,对象树 如下: 注册页也同理: 6.2.2

    1.9K30

    CSS 入门指南:轻松掌握网页布局与样式设计艺术

    (垂直方向)居中对齐。...作用对象:对齐是 多行或多列内容。 典型值: flex-start:行或列与交叉轴起点对齐。 flex-end:行或列与交叉轴终点对齐。 center:行或列在交叉轴上居中对齐。...text-align 适用于块级元素文本内容,而不是用于整个容器内子元素对齐。 作用对象:对齐是 文本或行内元素,例如文本、图片、按钮等。 典型值: left:文本或行内元素左对齐(默认)。...right:文本或行内元素右对齐。 center:文本或行内元素居中对齐。 justify:文本两端对齐,通过调整单词或字母间空白来填满行宽。...@media (max-width: 600px) { body { background-color: lightgray; } } 效果:当屏幕宽度小于600px时,背景颜色变为浅灰色

    7110

    【移动端网页布局】流式布局案例 ⑦ ( 水平排列图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

    */ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...该布局最大 640 像素 */ max-width: 640px; } .search-btn { /* 左侧按钮布局 */ /* 左侧按钮需要设置左侧 使用绝对定位进行设置...margin: 14px 0 0 15px; } .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置左侧 使用绝对定位进行设置 */ position...像素外边距 左右 50 像素外边距 */ margin: 0 50px; /* 左侧和右侧设置为 15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置...可以设置宽高 */ display: block; /* 盒子模型尺寸为 1 x 15 像素 */ width: 1px; height: 15px; /* 设置盒子灰色背景

    2.3K40

    网站App都变灰了,是怎么实现呢?

    粉丝群里有人在问,这是如何做到? 随便打开这些任何一个网站,全站内容都变成了灰色,包括按钮、图片等等。相信这时候从事程序开发粉丝可能会好奇这是怎么做到呢?...CSDN 爱奇艺 百度 有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色了,按钮等样式也统一换成了灰色样式。...从事前端开发朋友会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色了,按钮等样式也统一换成了灰色样式。...官方介绍内容如下: filter CSS 属性模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框渲染。 CSS 标准里包含了一些已实现预定义效果函数。...所以一切到这里就清楚了,如果我们想要把全站变成灰色,再考虑各浏览器兼容写法,可以参考下 CSDN 写法: .gray { -webkit-filter: grayscale(100%);

    1.2K10

    Refactoring UI

    三级操作应易于发现,但不引人注目,这些操作设计成链接样式通常是最好方法 当你采用层次优先方法来设计页面上操作时,用户界面就不会那么忙乱,而且能更清晰地传达信息 # 破坏性行为 具有破坏性或高度严重性并不意味着按钮一定要又大又红又粗...)来说,这意味着绝大多数文本都应左对齐 # 不要将长格式文本居中 居中对齐对于标题或简短、独立文本块来说非常合适 如果内容超过两三行,几乎总是左对齐更好看 如果有几个文本块需要居中,但其中一个有点太长...为了让灰色更有温暖感,可以在灰色中加入一点黄色或橙色 # 无障碍并不一定意味着丑陋 为确保您设计具有可访问性,建议普通文本(约 18px 以下) 对比度至少为 4.5:1,较大文本对比度至少为...,而模糊半径较大阴影则会让人感觉元素更接近用户 用户感觉越亲近东西,就越能吸引他们注意力 对于按钮之类东西,你可能会使用较小阴影,因为你希望用户注意它,但又不想让它占据整个页面 中等阴影适用于下拉菜单等需要比用户界面其他部分更高元素...# 阴影与互动相结合 可以在用户与元素交互时提供视觉提示 # 阴影有两个部分 有时候会将两个阴影结合一起使用 第一个阴影更大、 更柔和, 具有相当大垂直偏移和较大模糊半径,模拟是直接光源在物体背后投下阴影

    70930

    Flexbox 布局最简单表单

    三年前,我写过 Flexbox 介绍(上,下),但是有些地方写得不清楚。今天,我看到一篇教程,才意识一个最简单表单,就可以解释 Flexbox,而且内容还很实用。...根据 HTML 标准,它是一个块级元素,默认占据全部宽度,但是高度为0,因为没有任何内容。 二、表单控件 现在,加入两个最常用表单控件。...上图中,按钮宽度没变,但是输入框变宽了,等于当前行宽度减去按钮宽度。 flex-grow属性默认等于0,即使用本来宽度,不拉伸。等于1时,就表示该项目宽度拉伸,占据当前行所有剩余宽度。...-- a smiley icon --> 按钮插入图片后,它高度变了,变得更高了。这时,就发生了一件很奇妙事情。 ?...flex-start:顶边对齐,高度不拉伸 flex-end:底边对齐,高度不拉伸 center:居中,高度不拉伸 stretch:默认值,高度自动拉伸 (完)

    1.5K20
    领券