如何使用物化css的图标居中对齐按钮？
物化CSS是一种基于CSS的图标库，它提供了丰富的矢量图标，可以用于网页和应用程序的设计和开发。要使用物化CSS的图标居中对齐按钮，可以按照以下步骤进行操作：
- 引入物化CSS库：在HTML文件的头部添加以下代码，将物化CSS库引入到项目中。<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-icons@3.0.1/iconfont/material-icons.css">
- 创建按钮元素：在HTML文件中创建一个按钮元素，例如：<button class="material-icons">button_icon</button>
- 使用物化CSS图标：在按钮元素的class属性中添加"material-icons"类，然后在按钮内部添加物化CSS图标的名称。例如，如果要使用"home"图标，可以将按钮元素修改为：<button class="material-icons">home</button>
- 居中对齐按钮：为了使按钮居中对齐，可以使用CSS的flex布局。在按钮的父元素上添加以下样式：.parent-element { display: flex; justify-content: center; align-items: center; }
以上步骤完成后，物化CSS的图标居中对齐按钮就可以正常显示了。
物化CSS的优势是提供了丰富的矢量图标，可以轻松实现图标的使用和样式定制。它适用于各种网页和应用程序的设计和开发，可以提高用户界面的美观性和用户体验。
腾讯云提供了云计算相关的产品和服务，其中与前端开发和设计相关的产品是腾讯云Web+和腾讯云CDN。腾讯云Web+是一款全托管的Web服务平台，提供了丰富的前端开发工具和资源，可以帮助开发者快速构建和部署网站和应用程序。腾讯云CDN是一项内容分发网络服务，可以加速网站和应用程序的内容传输，提高访问速度和用户体验。
腾讯云Web+产品介绍链接地址：https://cloud.tencent.com/product/webplus
腾讯云CDN产品介绍链接地址：https://cloud.tencent.com/product/cdn
相关·内容
我已经用tumblr建立了我的博客doopist.com。
我正在尝试将twitter关注按钮和Facebook点赞按钮与我的博客标题徽标图像排成一条线。目前，Twitter图标在顶部横幅的顶部对齐，而FB按钮更接近居中。我尝试将按钮垂直居中，类似于徽标居中的方式。我不太了解CSS，我试着做一个垂直居中对齐<e
浏览 0提问于2013-03-08得票数 1
2回答
垂直对齐内部元素
、、
我挣扎了相当一段时间，为我的具体问题提供了一个解决方案，以垂直排列多个内部元素。我想要实现的目标看起来很像这样(右边的动作按钮与左边的文本垂直对齐，材料图标对齐在边框元素的中间)：
使用物化的阀门包装，我能够垂直对齐动作按钮div，但我正在挣扎中的材料图标内的边缘ul元素。(物化
浏览 1提问于2017-05-03得票数 1
回答已采纳
我想在Bootstrap 4导航栏上放置一些自定义图标按钮。我试着用这样的方式放置按钮： <img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">该按钮显示在导航栏上
浏览 18提问于2017-06-28得票数 0
回答已采纳
3回答
如何在Flutter中左对齐OutlineButton图标?可以按如下方式添加Icon，但图标和文本都在按钮中居中对齐。有没有办法让图标左对齐，文本居中对齐？
浏览 0提问于2018-10-04得票数 12
回答已采纳
="title"> <input type="button" class="btn"></input>我希望<span>的宽度是按钮只有一个图标，按钮大小为40 x 40。现在按钮的宽度和高度是已知的，而<h1><
浏览 1提问于2015-10-09得票数 2
2回答
我为UI创建的按钮由一个图标和一些文本组成，如下所示：我使用jQuery来创建按钮，其中的HTML如下：JavaScript是这样的： label: "
浏览 0提问于2012-12-12得票数 1
回答已采纳
我正在尝试使用flexbox将我的图标与按钮视图的左侧对齐，并将文本与中心对齐。目前，它们都是居中对齐的，但我不确定如何将我的图标放在按钮的最左边缘，同时使文本在视图中居中
我用表示按钮，用表示图标
下
浏览 4提问于2017-01-07得票数 2
回答已采纳
有什么方法可以在MaterializeCSS中垂直对齐(中间)复选框及其标签吗？ -我希望复选框相对于蓝色框垂直居中。如果您从小提琴中移除物化，并使用普通的HTML/CSS，它就能工作。HTML: <div> <labe
浏览 0提问于2018-01-23得票数 1
回答已采纳
我正在尝试创建一个带有X的小按钮(字体- am的<i class="fa fa-close"></i>)。我试着让它看起来像这样：然而，我遇到了一些让X在按钮内居中的问题。下面是标记： <i class="fa fa-close"></i>
</button&g
浏览 1提问于2016-08-26得票数 5
我正面临着一个文本在标签中垂直向下的问题。此问题特别适用于Open Sans google字体。Arial和其他字体似乎工作得很好。不知道问题出在哪里。请在此处找到jsFiddle：任何帮助都是非常感谢的。
浏览 1提问于2017-09-14得票数 1
我想在jquery移动应用程序中对可折叠的头文本进行居中。Hijo"></li> </ul>我有一个对我创建的custom.css文件的引用，其中有：
.custom-centercol
浏览 6提问于2014-02-19得票数 0
我是CSS的新手，我创建了一个呼叫目录，在左侧显示一个图标和旁边的人的名字。在下一行中，我将打印他的电话号码。电话号码居中对齐，但名称并不总是对齐。为了使其居中，我将所有内容包装在一个div中
浏览 3提问于2014-04-29得票数 0
我设置了样式按钮，使其看起来像是带有CSS的磁贴，我还使用了setText()作为名称，setGraphic()作为图标。
要让它看起来像一个真正的WP8磁贴，文本必须是左下角对齐和图形居中对齐。我使用过setAlignment()，但它提供了相同的图形和文本对齐方式。而且setTextAlignment()不适用于单行文本。
浏览 10提问于2016-09-07得票数 0
4回答
md-按钮内的字体图标对齐
、、、、
我试图在按钮内对齐字体令人敬畏的图标，使它们相对于工具栏上的文本居中。class="fa fa-lg"></md-icon> </div></div>
第二个图标上的fa-lg使它看起来以中心为中心，尽管我怀疑
浏览 2提问于2015-11-27得票数 13
回答已采纳
我想做一个按钮，像一个普通的按钮，但我希望它显示一个图标(SVG)而不是文本。我试过：
设置icon使用ImageButton而不是Button在按钮左侧绘制一个小图标，但它不再像按钮了(它只是一个灰色的 background扭曲图标，因为它没有保持高宽比，并且它不再像按钮那样使用表情符号text，但限制在可用的表情符号<code>H 214<&
浏览 14提问于2021-10-08得票数 0
在ExtJS 4中，我试图创建一个垂直方向的ButtonGroup，其中有一个按钮可以启动： columns: 1, }, text: "Your Books", } ]CSSimportant;然而，图像左边是平齐的
浏览 3提问于2011-09-08得票数 7
我在fxml中有一个GridPane，它有一个文本标题和4个按钮。GridPane本身居中对齐，但所有按钮在网格的列中左对齐。我知道如何使用Java代码更改项的对齐方式，但这不是理想的情况，因为我希望所有样式都使用FXML和CSS处理。有人能建议在JavaFX的GridPane视图中居中对齐单元格元素的
浏览 1提问于2014-09-16得票数 10
我只想使用CSS而不是表格来重新创建它<ul><span class="icon-class icon-name"></span></li></ul>
icon-class设置图像、显示块、宽度和高度，icon-name
浏览 1提问于2011-10-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
