如何在React.js中使网页上的图标居中对齐？
在React.js中使网页上的图标居中对齐，可以通过以下几种方式实现：
- 使用Flexbox布局：在包含图标的父元素上设置display为flex，然后使用justify-content和align-items属性来控制图标的水平和垂直居中对齐。例如：
import React from 'react';
import './App.css';
function App() {
return (
<div className="container">
<div className="icon-container">
<i className="icon"></i>
</div>
</div>
);
}
export default App;.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: #ccc;
}
.icon {
font-size: 24px;
color: #fff;
}- 使用绝对定位：将图标的父元素设置为相对定位，然后使用绝对定位将图标居中对齐。例如：
import React from 'react';
import './App.css';
function App() {
return (
<div className="container">
<div className="icon-container">
<i className="icon"></i>
</div>
</div>
);
}
export default App;.container {
position: relative;
height: 100vh;
}
.icon-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #ccc;
}
.icon {
font-size: 24px;
color: #fff;
}- 使用Grid布局：在包含图标的父元素上设置display为grid，然后使用place-items属性来控制图标的水平和垂直居中对齐。例如：
import React from 'react';
import './App.css';
function App() {
return (
<div className="container">
<div className="icon-container">
<i className="icon"></i>
</div>
</div>
);
}
export default App;.container {
display: grid;
place-items: center;
height: 100vh;
}
.icon-container {
width: 100px;
height: 100px;
background-color: #ccc;
}
.icon {
font-size: 24px;
color: #fff;
}以上是三种常用的方法来实现在React.js中使网页上的图标居中对齐的方式。根据具体情况选择合适的方法来实现对齐效果。
相关·内容
我正在尝试将三个图标之间的间距对齐。我的代码，即landing.js -import MaterialIcon, {colorPalette} from 'material-icons-react
浏览 22提问于2019-07-11得票数 1
回答已采纳
我想在Bootstrap 4导航栏上放置一些自定义图标按钮。我试着用这样的方式放置按钮： <img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">该按钮显示在导航栏上，但它在顶部<em
浏览 18提问于2017-06-28得票数 0
回答已采纳
3回答
我想知道在单元格内将左对齐的文本更改为居中对齐的最简单方法。stackoverflow上的某个人用以下代码帮助我解决了如何在wordpress页面上居中放置表格的问题。<td></td> </tbody><&#
浏览 1提问于2011-10-05得票数 2
回答已采纳
3回答
就一个简单的。我有3个字体可怕的图标，我正在使用的联系按钮在我的网页上。它们垂直对齐，并在容器div中居中。我还在每个图标旁边有文本，这会导致图标和文本都在页面上居中。我要做的是竖直地对图标进行居中，并让文字单独跟着。我相信我可以将图标包装在一个容器中，然后将所有相应的文本放在另一个容器中，但
浏览 0提问于2018-02-28得票数 0
回答已采纳
4回答
md-按钮内的字体图标对齐
、、、、
我试图在按钮内对齐字体令人敬畏的图标，使它们相对于工具栏上的文本居中。class="fa fa-lg"></md-icon> </div></div>
第二个图标上的fa-lg使它看起来以中心为中心，尽管我怀疑
浏览 2提问于2015-11-27得票数 13
回答已采纳
2回答
我正在尝试用纯色的盒子做一个画廊，上面有一个图标，当你将鼠标悬停在盒子上时，纯色变成了一个图像，而图标仍然存在。
实际上，我在上一个问题上得到了一个很好的答案，但没有保持网站的响应性。所以我想我想出了一个绕过这个问题的方法，但我似乎找不到一个让图标保持在顶部的方法。blue-icon-transparent-background-500px.png) no-repeat center; display: in
浏览 1提问于2013-06-06得票数 0
回答已采纳
4回答
我有三个要在网页上居中对齐的文本框。然后我想要在每个标签的右边有一个标签描述。当我使用像text:align:centre这样的属性时，因为标签的长度不同，它会抛出文本框的对齐方式参见下面的图像链接
有没有一种简单的方法可以保持文本框对齐，然后在不更改文本框的情况下将标签移到右侧
浏览 3提问于2010-05-09得票数 2
回答已采纳
主要的问题是，我尝试了command+drag到视图，并选择“在容器中水平对齐”，但由于某种原因(我在iPhone 7上做了此操作)，当我检查其他设备(如iPad Pro)时，它们没有对齐。我的问题是，在世界上，你如何在没有使用Swift的情况下对标签进行居中？
浏览 5提问于2016-12-30得票数 0
回答已采纳
1回答
这个“只是另一个模糊的图标问题”开始让我头疼，这就是为什么我决定在这里寻求帮助。相信我，我已经读过网上所有的“模糊图标”文章了。下图显示了当您调整浏览器宽度、在奇数值和偶数值之间切换时，github.com上的字体图标所发生的情况。但问题来自于其他地方，它来自某个父元素(.container)，它使用设置为“auto”的边距/右属性对自己进行居中。所有的图标都是正确的网格对齐</e
浏览 4提问于2014-11-12得票数 0
5回答
body align="middle"><ol></ol></html>
问题是数字(1.)是在左边，当我希望它在标题下对齐的时候
浏览 6提问于2013-10-14得票数 33
回答已采纳
3回答
如何在我的android应用程序中使用actionbar sherlock？我试过这个网站，但没有成功。我想要有一个背景图像，居中的应用程序名称“没有图标在操作栏”我已经尝试过和中的示例，但我不明白如何设置代码，如文件和所有。我需要一些额外的帮助，这是我的下载链接
浏览 4提问于2013-05-28得票数 4
回答已采纳
我是网页设计的新手。我正在尝试制作一个盒子，包括一个图标和一个链接。当屏幕是膝上型电脑时，链接应该在图标的左边并垂直地与其中心对齐；当屏幕是平板电脑和手机时，图标应该在图标底部并与其中心水平对齐。，并且链接总是在框的顶部对齐。我尝试过的方法：
使用表格，并将图标和链接设置为两个表数据:它们可以对齐我想要的，但是由于它们是两列，所以当屏幕大小改
浏览 4提问于2015-09-01得票数 1
我试图改变我的网站在谷歌搜索标题，但我似乎找不到如何做。我看到了一些关于反应头盔的东西，我不知道如何在我的文件中使用它。我试图改变我的网站和网页的标题和描述。我用react.js制作了网站，并把它放在apache2上。
浏览 15提问于2022-05-16得票数 0
回答已采纳
2回答
我尝试在我的hyprid应用程序(ionic)中使用line-height将一些项目垂直居中对齐.wrapper { }
在chrome开发者模式下，一切都很好:文本与绿色容器居中对齐。..but当我在我的设备上渲染应用程序时(iphone4s ios8.4.1应用程序:离子视图)，文本不再垂直居中：例:
浏览 4提问于2015-09-11得票数 1
1回答
我使用的是，它是如此恼人，看到一些图标没有垂直正确地对齐，并且倾向于被提升到高于正如您可以在上面看到的那样，我缩放了60px上令人敬畏的react字体图标，它看起来很糟糕。以下是我如何在JSX中使用它如何垂直对齐它与其他内容或文本的
浏览 2提问于2022-08-30得票数 0
回答已采纳
我在一个C# winforms项目中使用ObjectListView，并希望在其中一列中显示一个小图标。到目前为止，图标显示得很好，但它不在列的中心，而且我找不到任何与列中的图像对齐有关的文档或代码。col_Important.AspectGetter = delegate(object x) { return ((ClassMyItem)x).IsImportant;"star"
浏览 0提问于2012-01-31得票数 1
回答已采纳
我不能导入line- and框架并在vue.js应用程序中使用它的图标。 我已经尝试在我的html文件中添加CDN链接，就像前面提到的here。添加它时，并尝试使用它的图标，如 <i class="la la-home"></i> 网页不显示任何内容，但在使用 <i class="fa fa-home"></i> 取而代之<
浏览 37提问于2019-04-11得票数 1
1回答
我创建了一个表单，其中一些文本元素垂直对齐，如下所示：它们使用flexbox在页面上水平和垂直居中： display: flex; align-items: center;}
我现在要做的是在第一个文本框的两边添加一些元素的同时，保持这种对齐方式(即保持页面上的所有内容都已经在原来的位置上</em
浏览 2提问于2017-12-01得票数 0
2回答
当我制作网页时，当图像或SVG真的不需要时，我喜欢使用unicode字符作为图标。这对我来说很简单，它可以使页面更轻点。这是很好的工作，通常，除了我总是不得不摆弄偏移，以使它正确地居中。width: 10px; line-height: 10px;}
浏览 0提问于2018-04-15得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
