css - Jquery-ui:对齐多个图标和文本

Question

我在标题行中间对齐两个 jquery-ui 图标和文本时遇到了麻烦。 (代码爆炸)。任何人都可以帮忙吗？

<div class="ui-widget-header">
  <span class="ui-icon ui-icon-close"></span><span class="ui-icon ui-icon-wrench"></span>Text
</div>

Answer 1

我不太清楚你想要什么输出。

如果您尝试让图标和文本全部显示在一行上，可以通过创建一个新的 CSS 类来实现:

.ui-icon.inline { display:inline-block; }​
.ui-widget-header.center { text-align:center; }

然后将该类添加到您的图标中:

<div class="ui-widget-header">
    <span class="ui-icon inline ui-icon-close"></span>
    <span class="ui-icon inline ui-icon-wrench"></span>
    Text
</div>​

如果您希望它们在 div 中水平居中，您可以将 div 更改为:

<div class="ui-widget-header center">