Question

我在菜单栏中遇到此问题。

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

代码：

<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>

但它没有用。如何使用css为文本中心设置样式。

Answer 1

要解决手头的问题，请从text-align: center移除span，然后将其添加到父元素th和td }。

但是，您的代码显示了一些我想指出的其他问题。

为何选择table？

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

为什么采用内联样式？

有三种方法可以应用CSS：

使用<link>

<head>

<style></style>部分
内联样式（这就是您正在使用的内容）

现在，内联样式将覆盖外部样式表或style元素的规则。他们也违反了分离内容和表达的想法。因此，除非您有特定的理由使用它们，否则它们被视为不良做法。

全部放在一起

因此我建议如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
  width: 108px;
}

li {
  color: #fff;
  text-align: center;
  background-color: #2d323e;
  background-repeat: no-repeat;
  background-position: center 20%;
}

li.customers,
li.user {
  background-image: url(http://via.placeholder.com/20x20);
}

li a {
  display: block;
  width: 100%;
  height: 94px;
  padding-top: 60%;
  color: inherit;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 9pt;
  font-weight: bold;
}

<ul>
  <li class="customers"><a href="#1">Customers</a></li>
  <li class="user"><a href="#2">User</a></li>
</ul>

Answer 2

这是因为您要将select *, (yesterday_cnt-today_cnt)/100 AS Percentage from tablename添加到span属性中，我可以理解为什么要尝试将其添加到span中。但是text-align最好用在父元素上，以基本上对齐子元素。

你会做这样的事情（并不意味着像你的代码，只是一个如何使用的例子）：

HTML：

text-align

的CSS：

<div id="myDiv">
    <img src="img1.png" class="img" />
    <p>My Text</p>
</div>

不是每当加载id为#myDiv {text-align: center;}的div时，它都会居中对齐div中的所有子元素。

在您的情况下，您需要将其添加到包含您要对齐的文字的表格myDiv / <td>。 E.g。

<th>

Answer 3

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

ul {
  list-style: none;
  width: 5em;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  position: relative;
  text-align: center;
  padding-top: 1.5em;
  min-width: 5em;
  background-color: blue;
  color: white;
  cursor: pointer;
}

li:not(:first-child) {
  margin-left: .1em;
}

li:hover {
  background-color: lightblue;
}

li:before {
  font-family: FontAwesome;
  position: absolute;
  width: 1em;
  top: 0.3em;
  left: calc(50% - .5em);
}

.customers:before {
  content: "\f0c0";
}

.user:before {
  content: "\f2c0";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li class="customers">Customers</li>
  <li class="user">User</li>
</ul>

Answer 4

您需要将text-align:center添加到th和td

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

将文本对齐为菜单栏中的中心

4 个答案: