css图标和文字对齐

CSS图标和文字对齐基础概念

CSS图标和文字对齐是指在网页设计中，将图标（通常是通过字体图标库如Font Awesome、Iconfont等实现的）与文字进行视觉上的对齐，以达到美观和一致的用户体验。

类型

垂直对齐：图标和文字在垂直方向上对齐。
水平对齐：图标和文字在水平方向上对齐。
基线对齐：图标和文字的基线对齐。

应用场景

导航栏
按钮
列表项
表单元素

常见问题及解决方法

问题1：图标和文字垂直对齐不一致

原因：图标和文字的行高或字体大小不一致。

解决方法：

.icon-text {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.icon-text i {
  font-size: 24px; /* 设置图标大小 */
  margin-right: 8px; /* 图标和文字之间的间距 */
}

问题2：图标和文字水平对齐不一致

原因：图标和文字的宽度或边距不一致。

解决方法：

.icon-text {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
}

.icon-text i {
  margin-right: 8px; /* 图标和文字之间的间距 */
}

问题3：图标和文字基线对齐不一致

原因：图标和文字的基线不一致。

解决方法：

.icon-text {
  display: inline-block;
  vertical-align: middle; /* 基线对齐 */
}

.icon-text i {
  font-size: 24px; /* 设置图标大小 */
  margin-right: 8px; /* 图标和文字之间的间距 */
}

参考链接

通过以上方法，可以有效地解决CSS图标和文字对齐的问题，提升网页设计的整体效果。

页面内容是否对你有帮助？

有帮助

没帮助

如何将图标与文本的右边与图标列表元素或模块对齐？

、、

我想把图标对齐到右边的文字与模块“图标列表元素”，有没有选择这可以是一个css解决方案？

浏览 5提问于2020-08-25得票数 2

回答已采纳

4回答

如何以图标为中心相互显示图标和文本

、、

基本上它是一个图标，后面跟着文字。我试图在中间对齐图标，然后在图标下方对齐文本。我该怎么做？<i class="icons" ></i><li />.icons ::before { content: url(/Sty

浏览 7提问于2020-09-28得票数 0

回答已采纳

5回答

当离子图标较大时，离子-离子项文本不是垂直中心。

、

我有一个带有图标的离子项目列表，后面跟着文字。当图标大小较小时，如下图所示，文本似乎垂直地与ion-item的中心对齐。但是当图标更大时，对齐就有点偏离了。<ion-item> Recent和<em

浏览 2提问于2016-02-25得票数 29

回答已采纳

1回答

文本对齐中心与google图标

、、

我有带短信的谷歌图标。我需要中心对齐我的文字，使它看起来很好与图标。我尝试了css垂直对齐，但没有工作。有人能帮我对齐我的短信中心吗。

浏览 2提问于2018-01-03得票数 0

1回答

如果在垂直列表中有一个元素(文本)，并且左边有一个图标，那么在一行上如何垂直对齐文本？

、

也许有人知道一个很好的方法来对齐一行文字，并将图标移到左边。 CSS屏幕

浏览 2提问于2022-05-31得票数 0

4回答

我已经创建了一个div，它显示一个图标和文本，但我需要得到的图标旁边的文字，而不是在上面。有更好的方法来对齐div吗？我需要有空间之间的图标和文字，并使它与文字。使用CSS尝试对齐的.align-items { display: flex; justify-content: space-between; } .align-content { display: flex; align-items: center; } 仍然会导致

浏览 3提问于2021-01-26得票数 0

回答已采纳

4回答

HTML/CSS位置图标

、

我的页面上有很多备用按钮：我需要给它添加图标，使其看起来像这样：

浏览 3提问于2015-09-15得票数 6

1回答

使用字形-三角形-左与Intel XDK，它显示为一个汉字。

、

名单：象形<e

浏览 2提问于2016-06-01得票数 1

回答已采纳

6回答

在表格单元格中向右对齐图标？

、

我有一个简单的表格单元格，包含一个文本和一个图标。我想对齐左边的文字和右边的图标。我试过这样做，但不管用。我知道的唯一解决方案是创建另一个td，将图标放入其中。但是我想两者兼而有之，文本和图标都在一个td中 table { } border: 1pxwidth: 200px; <link rel=

浏览 2提问于2016-02-05得票数 13

回答已采纳

4回答

如何在表格单元格的对面放置两个元素

、、

我有一个有文字和图标的表格单元格。我希望这两个元素链接到同一个地方。我希望文本与左侧对齐，图标与表格单元格的右侧对齐。文本和图标都必须是链接。此外，当用户单击<a>标记时，我正在抓取它的宽度。如果我把文字和图标切成两个不同的标签，我的测量就会不准确。

浏览 2提问于2013-09-17得票数 2

回答已采纳

2回答

链接中的中间文本和图像垂直对齐

、

使用下面的代码我的文字是垂直对齐底部。需要帮助垂直对齐中间的文字与图标在链接。icon"> <div class="arrow-white-right"></div>CSS

浏览 2提问于2014-07-02得票数 1

回答已采纳

2回答

将文本对齐到图标

、

请帮助我垂直对齐图标和文字。 <ul> </ul>CSS

浏览 5提问于2013-10-11得票数 3

回答已采纳

2回答

如何确定drawItemText在Qt中的末端位置

、

我试图通过子类化和重写QPUshButton来定制一个paintEvent。我正在写课文，下面是图标： { opt.init(this)(),Qt::AlignRight|Qt::AlignVCenter, this->icon().pixmap(this->rect().height() * 0.75)); 我是中心对齐的文字，并正确地对齐</e

浏览 4提问于2012-09-12得票数 2

回答已采纳

1回答

引导3中的文本和图标对齐

、、

我试图对齐一些文字和图标正确。例如，我想展示以下内容：和在第一个文件中，象形文字显示在文本的左边。在第二部分中，象形文字显示在文本的右边。我的问题是，无论我做什么，文本没有垂直对齐图标正确。例如，使用下面的HTML，标签会显示比图标低几个像素。我希望文本垂直中心与图标或反之亦然。padding-left:0px;"

浏览 3提问于2014-09-15得票数 0

回答已采纳

3回答

在我的情况下，如何将垂直对齐设置为中间？

、、

我试图修改htmls元素以实现两件事：似乎奇怪的是，它在没有任何额外的css的情况下创造了两个空白。有人能帮我吗？

浏览 0提问于2017-03-29得票数 0

回答已采纳

2回答

如何使用图标垂直列表项目

、、

有人能帮助我理解我如何垂直对齐这个吗？<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css" <aside class="menu column is-2 f

浏览 10提问于2017-11-06得票数 1

回答已采纳

1回答

在按钮中显示图标的离子弹出窗口出现问题

、、

button icon-left ion-close-round button-assertive' ]以及它生成的输出：以下是CSS的相关部分：{ di

浏览 6提问于2016-02-22得票数 3

3回答

在以下情况下将文本换行:将图像放在其上方

、、、、

我需要一些帮助，防止下面的一些文字和图像推动图像时，它包装。请参阅附件中的图像，以便更好地理解我正在谈论的内容。我们的目标是让所有的图标水平排列，并将"This Text Is“与"Some Text”和"More Text“对齐。“line”应该在它自己的行上低于所有其他的东西。<h3>Some Text</h3> </div> 下面是我用来创建固定宽度列的CSS</e

浏览 14提问于2017-03-16得票数 1

回答已采纳

1回答

spans和Bootstrap 3的布局问题

、

每一个“微型”都有： .minitron-icon { height: 20%;} .minitron-name

浏览 0提问于2016-01-08得票数 1

回答已采纳

1回答

获取指示符以垂直对齐文本。

、、、

每当我使用一个图标在前面或后面的文字，他们是不对齐。我将如何制作它，使图标与文本一致？我可以更改HTML，使其成为一个单独的元素，但优先寻找一个css解决方案，使用“前”选择器。

浏览 2提问于2015-06-29得票数 3

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css图标和文字对齐