首页
学习
活动
专区
工具
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图形就会居中对齐到具有灰色背景的按钮上。

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

相关·内容

【CSS——页面布局】新鲜的蔬菜(蓝桥杯真题-2439)【合集】

所有元素的大小都已给出,无需修改,完成后效果如下(图中灰色线条为布局参考线无需实现): 要求规定 请勿修改页面中所有给出元素的大小,以免造成无法判题通过。...使用线性渐变设置背景图像,并设置背景图像的大小为 6x6 像素。 .box 样式: display: flex;:将 .box 元素设置为弹性容器。...#box3 .item:nth-child(2):选择 #box3 中的第二个 .item 元素,align-self: center; 使其在垂直方向上居中对齐。....container 元素被设置为弹性容器,子元素按照弹性布局排列,水平居中且允许换行。 .item 元素被设置为块级元素,具有固定的宽度和高度,图片自适应宽度。...每个 box 元素内部的子元素根据不同的 id 选择器设置的弹性布局属性进行排列,如居中对齐、两端对齐、垂直方向的不同对齐方式等。 3.

1900

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

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以上,我们得到了以下设计。我们正在一点一点地接近目标,但还有更多问题需要解决。...因此,为了最佳可读性,最好保持文本左对齐。对于较长的正文文本,最好避免居中对齐或两端对齐的文本。这种对齐方式更难阅读,尤其对于认知障碍的人来说。 居中对齐适用于标题和短文本,因为可以快速阅读。...然而,居中对齐会使较长的正文文本更难阅读,因为每行的起始点不断变化。你的眼睛需要更努力地找到每行的起始点。 在我们的例子中,属性描述文本采用了居中对齐。

    36420

    Bootstrap基础学习笔记

    每列左右间隙各15px .col-{1到12} 定义在所有屏幕下的列宽 .col-{sm|md|lg|xl}-{1到12} 定义在指定屏幕下该列占据的列宽,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

    【Html.js——功能实现】分享点滴(蓝桥杯真题-18555)【合集】

    当复制按钮被点击时,会获取链接元素的文本内容,并调用copyToClipboard函数将其复制到剪贴板。...margin: 20px; 给页面主体添加了 20px 的外边距。 background-color: #f5f5f5; 设置页面的背景颜色为浅灰色。...h1 标签设置了标题居中显示和行高。 h2 标签设置了副标题右对齐显示、行高和文字颜色。 6.....block>button 类设置复制按钮的样式,包括宽度、高度、背景颜色、文字颜色和鼠标指针样式。 :hover 伪类为复制按钮设置鼠标悬停时的背景颜色。...渲染页面:浏览器将 DOM 树和 CSSOM 树合并,生成渲染树,根据渲染树计算每个元素的布局和样式,最后将页面渲染到屏幕上。此时分享对话框由于 display: none; 处于隐藏状态。

    10210

    【Html.js——功能实现】布局切换(蓝桥杯真题-18556)【合集】

    背景介绍 为了提高用户体验,网站有时需要多种浏览模式。现在特邀请你为蓝桥官网设计具有经典、浏览和工具三种布局模式。使用户可以根据具体情况选择合适的模式,以便更好地浏览网页内容。...显示模式按钮点击事件: 为 switching 按钮添加点击事件监听器,当点击时,将 mode 元素(布局选项区域)的 display 属性设置为 flex,使其显示出来。 3....margin: 20px; 给页面主体添加了 20px 的外边距。 background-color: #f5f5f5; 设置页面的背景颜色为浅灰色。...h1 标签设置了标题居中显示和行高。 h2 标签设置了副标题右对齐显示、行高和文字颜色。 6.....block>button 类设置复制按钮的样式,包括宽度、高度、背景颜色、文字颜色和鼠标指针样式。 :hover 伪类为复制按钮设置鼠标悬停时的背景颜色。 四、工作流程▶️ 1.

    5400

    【移动端网页布局】流式布局案例 ④ ( 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

    实战 HTML & CSS:如何快速搭建一个响应式博客首页

    ,导航栏的样式分为3个点: 背景颜色; 导航文字居中展示; 固定位置,永远在浏览器页面的最顶上; nav{ background-color: cornflowerblue...; /* 导航栏背景颜色设置为淡玉米花蓝 */ height: 40px; /* 导航栏高度设置为40像素 */ text-align: center; /* 导航栏内文本水平对齐方式设置为居中...*/ align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定...但也是有一定套路的,我最常用的就是通过临时添加不同的背景颜色去调试嵌套盒模型,这样我们可以很方便看到各种布局的效果,调试完成后,再恢复到预期的背景色即可。...align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定,以便在页面滚动时保持在原位置

    14910

    Power BI+DeepSeek+SVG实现卡片图自由

    视频讲解: 以下是向DeepSeek提问的信息: 在Power BI写一个内嵌SVG的度量值,并且加上前缀data:image/svg+xml;utf8, SVG图形的具体内容为: 1....整个SVG图像宽度300像素,高度100像素 2. 底层是一个长方形,长方形的ID是“A”,长方形占满整个画布,边框2像素,边框为灰色,填充色为无,有一定圆角效果。 3....左侧是一个边长70像素的正方形,正方形的ID是“B”,相对画布垂直居中,有一定的圆角弧度,距离画布上下左边各预留一定距离,B没有边框,填充色按照条件变化,当度量值[增长率]大于等于0时,填充色为绿色,当小于...X坐标100像素处写两行文字,上边引用Power BI模型“店铺资料”表中的城市列,下方是[M.销售业绩]度量值的值,格式为千分位,城市文本加粗且颜色为黑色,[M.销售业绩]颜色为深灰色,两个文字均左对齐...这里有三个重点: 首先,我们要告诉DeepSeek使用背景,是要在Power BI写SVG度量值,并且加上前缀使得Power BI表格矩阵、新卡片图可以识别。

    19910

    BootStrap基础知识

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

    33410

    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.6K20

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

    */ 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.8K20

    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.3K10

    六、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时,背景颜色变为浅灰色

    14610

    【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 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
    领券