1

完全にdivで構築されたテーブルのソートヘッダーを構築しています（つまり、テーブルタグはありません）。ソート ヘッダー内には、ソート タイトルとソート方向の 2 つの div があります。ヘッダーを水平方向に中央揃えにしたい。次のようなjsfiddleがあります。

    <div class="SomeHeader">
       <div class="HeaderTitle">sort1</div>
       <div class="HeaderSort">&nbsp;▾&lt;/div>
    </div>

    <div class="SomeOtherHeader">
       <div class="HeaderTitle">sort2</div>
       <div class="HeaderSort">&nbsp;▾&lt;/div>
    </div>​

.SomeHeader{
    width:90px;
    float:left;
    background:red;
    color:white;
    line-height:20px;}

.SomeOtherHeader{
     width:120px;
     float:left;
     background:black;
     color:white;
     line-height:20px;}

.HeaderTitle{float:left;}

.HeaderSort{float:left;}

これをきれいに行う方法は何ですか？各要素のマージンと幅を指定して目的の効果を得ることができることはわかっていますが、これらのヘッダーの値が変更されると、配置が中央に配置されません。ヘッダーをループしてヘッダーとタイトルの幅を計算し、プログラムで各ヘッダーの余白を設定することで、jQuery でもこれを実行できることはわかっています。HeaderTitle と HeaderSort の両方を SomeHeader クラス内に配置する、より一般的な CSS ベースのアプローチがあるかどうかを調べています。

ご提案いただきありがとうございます。

4

4 に答える 4

1

http://jsfiddle.net/7R9WW/13/

同じマークアップですがdisplay: inline-block、内側の div とtext-align: centerフィールド コンテナーにあります。

.SomeHeader{
    width:90px;
    float:left;
    background:red;
    color:white;
    line-height:20px;
     text-align:center;}

.SomeOtherHeader{
     width:120px;
     float:left;
     background:black;
     color:white;
     line-height:20px;
     text-align:center;}

.HeaderTitle{display:inline-block;}

.HeaderSort{display:inline-block;}
于 2012-06-28T14:10:10.743 に答える
1

HeaderSort div不要のようです。このように見えませんかhttp://jsfiddle.net/7R9WW/7/

更新された回答: http://jsfiddle.net/7R9WW/14/

于 2012-06-28T14:05:57.233 に答える
0

ラッパーを使用してください！

<div class="wrap">
    <div class="SomeHeader">
        <div class="HeaderTitle">sort1</div>
        <div class="HeaderSort">&nbsp;▾&lt;/div>
    </div>
    <div class="SomeOtherHeader">
        <div class="HeaderTitle">sort2</div>
        <div class="HeaderSort">&nbsp;▾&lt;/div>
    </div>​
</div>

そしてCSS：

.wrap {width: 220px; margin: auto;}
于 2012-06-28T14:09:44.243 に答える
0

これらの 2 つのヘッダー div を別の div でラップし、その div に margin:0 auto を指定します。

<div class="SomeHeader">
<div id="wrapper">
   <div class="HeaderTitle">sort1</div>
   <div class="HeaderSort">&nbsp;▾&lt;/div>
</div>
</div>

<div class="SomeOtherHeader">
<div id="wrapper">
   <div class="HeaderTitle">sort2</div>
   <div class="HeaderSort">&nbsp;▾&lt;/div>
</div>​
</div>

CSS:

#wrapper{
width: 100px;
margin: 0 auto;
overflow: hidden;
}

幅は、含まれている 2 つの div の幅の合計でなければならないため、幅を定義する必要があります。

于 2012-06-28T14:04:06.857 に答える