我在div中有这个跨度

<div>
  <span class="material-symbols-outlined" (click)="call()">
           phone
         </span>
  <span> Phone</span>
</div>

电话图标未与文本电话居中对齐

我也试了text-align :center,但不起作用,这个div也有一些外部div,如果我给空白处-顶部图标它移动整行

推荐答案

可以使用Flex对齐这两个跨度:

<div style="display:flex; align-items:center">
  <span class="material-symbols-outlined" (click)="call()">
    phone
  </span>
  <span> Phone</span>
</div>

您可以单独编写样式,而不是内联css.

Html相关问答推荐

HTML CSS如何使用图像作为中心点将元素置于中心

如何才能只给没有孟加拉语Kar符号的字母上色?

在将DevExtreme升级到版本23.2之后,到处都会生成一个Pesudo类,我在其中使用了<;DXi-Item Title=&Quot;&Quot;>;

在Hero部分中同时zoom 背景图像和形状的问题

一切停止工作后,添加不透明度(在tailwind )

是否可以只使用css而不使用像&;nbsp;这样的HTML符号来实现断字而不换行空格?

如何使用*ngFor将模板从父级传递到子级

为什么 html 元素的 max-width 和 width 一起工作?

模拟另一个输入值设置表单输入的数值

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

动态计算高度时 Div 不保持 1/1 纵横比

为什么
标签在 Edge 和 Firefox 中的编号会有两种不同的结果?

在 CSS 中的 div 中获取文本以环绕其他文本?

用于表行组标题的正确 HTML 标记是什么?

如何将元素均匀分布到容器的边缘?

按部分划分的表行带

调整大小时 CSS 溢出

如何向弹出窗口添加 sanitize: false 选项?

如何使文本显示在页眉/页脚之外?

在 EJS 中将元素放置在彼此下方的列中