css - Jquery-ui: 複数のアイコンとテキストを揃える

Question

ヘッダーの行の途中で 2 つの jquery-ui アイコンとテキストを揃えるのにかなりの時間を費やしています。（コードブロー）。誰でもかなりpleeeeeaseを助けることができますか？

<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

私はあなたが出力として何を望んでいるのか完全には明確ではありません。

アイコンとテキストをすべて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">