css - jquery-ui：对齐多个图标和文本

Question

我在标题中对齐两个 jquery-ui 图标和文本在行中间有一段地狱般的时间。（代码打击）。任何人都可以帮助漂亮pleeeeeease吗？

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