Html 将文本在菜单栏中居中对齐

我在菜单栏中面对这个问题

我需要将文本与图标的中心对齐

代码：

<table id="cssTable">
    <thead>
         <tr>
             <th>
                <i style=" text-align: center;vertical-align: middle;" class="icon s20 {{node.icon}}" ng-if="node.icon"></i>
             </th>
         </tr>
    </thead>
    <tbody>
         <tr>
             <td>
                  <span style=" text-align: center;vertical-align: middle;" class="title" translate="{{node.translate}}" flex>{{node.title}}</span>
             </td>
         </tr>
    </tbody>
</table>

{{node.title}

---

但它不起作用。如何使用css设置文本居中的样式。

您需要将

文本对齐：居中

添加到

th

和

td

<th style="text-align: center;"></th>
<td style="text-align: center;"></td>

---

这是因为您要将

文本对齐

添加到span属性中，我可以理解您为什么要尝试将其添加到span属性中。但是

text align

最好用于父元素，以便基本上对齐子元素

您可以这样做（并不意味着与您的代码类似，只是一个如何使用的示例）：

html:

并非每当加载id为

myDiv

的div时，它都会将div内的所有子元素居中对齐

在您的情况下，需要将其添加到保存要对齐的文本的表中。例如

---

td，th{text align:center}

作为替代方案，使用flexbox和图标的绝对定位

ul{
列表样式：无；
宽度：5em；
保证金：0；
填充：0；
显示器：flex；
}
李{
位置：相对位置；
文本对齐：居中；
垫面：1.5em；
最小宽度：5em；
背景颜色：蓝色；
颜色：白色；
光标：指针；
}
李：不是（第一个孩子）{
左边距：.1米；
}
李：悬停{
背景颜色：浅蓝色；
}
李：以前{
字体系列：Fontsome；
位置：绝对位置；
宽度：1米；
顶部：0.3em；
左：钙（50%-.5em）；
}
.顾客：以前{
内容：“\f0c0”；
}
.用户：之前{
内容：“\f2c0”；
}

客户
用户

要解决手头的问题，请从

span

中删除

文本对齐：居中
，而是将其添加到父元素
th
和
td

然而，您的代码显示了一些我想指出的其他问题

为什么要使用
表
？

您正在使用
表格
作为菜单。除非你有非常具体、紧迫的理由这样做，否则你不应该这样做。原因是HTML完全是关于语义的，把菜单变成表格并不是很有语义的——它根本不是表格数据。通常的做法是使用无序列表（
ul
）

为什么使用内联样式？

有三种方法可以应用CSS：


使用外部样式表
您的

内联样式（这就是您正在使用的样式）

现在，内联样式将覆盖外部样式表或
style
元素中的规则。它们还违反了将内容和表示分离的思想。因此，除非你有特定的理由使用它们，否则它们被认为是不好的做法

将所有内容放在一起

因此，我建议如下：


*{
保证金：0；
填充：0；
框大小：边框框；
}
保险商实验室{
列表样式：无；
宽度：108px；
}
李{
颜色：#fff；
文本对齐：居中；
背景色：#2d323e；
背景重复：无重复；
背景位置：中心20%；
}
李：客户，
li.user{
背景图片：url(http://via.placeholder.com/20x20);
}
李阿{
显示：块；
宽度：100%；
高度：94px；
垫面：60%；
颜色：继承；
文字装饰：无；
字体系列：无衬线；
字号：9pt；
字体大小：粗体；
}



我们不知道当前CSS是什么样子（除了标记中的内联规则）。你提供一份工作怎么样？换句话说，添加相关的CSS并使其成为一个。在没有看到CSS的情况下无法确定，但是
text align:center
应该可以工作。另外，不要使用内联js/css-这是一种不好的做法，会导致难以维护代码，移动到外部css文件除了手头的文本对齐问题之外，我可以问一下为什么您要使用
表
作为菜单吗？还有为什么你使用内联样式而不是外部样式表或页面标题中的样式？对不起，这是一个打字错误，不用担心，这就是我评论的原因。我仍然不会使用内联样式；毕竟，我们来这里是为了提供高质量的答案，而不是为了教授更好地避免的技巧。完整答案很好：）
<div id="myDiv">
    <img src="img1.png" class="img" />
    <p>My Text</p>
</div>

#myDiv {text-align: center;}