1

我正在为一个完全用 div 构建的表构建一个排序标题（即没有表标签）。在排序标题内，我有两个 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 来执行此操作，方法是遍历标题并计算标题和标题的宽度，并以编程方式设置每个标题的边距。我正在寻找是否有更通用的基于 CSS 的方法，它将 HeaderTitle 和 HeaderSort 集中在 SomeHeader 类中。

感谢您的建议。

4

4 回答 4

1

HeaderSort div似乎没有必要。难道它看起来不像这样http://jsfiddle.net/7R9WW/7/

更新答案：http: //jsfiddle.net/7R9WW/14/

于 2012-06-28T14:05:57.233 回答
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 回答
0

用另一个 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;
}

宽度应该是两个包含的 div 的宽度之和，因此您需要为它们定义一个宽度。

于 2012-06-28T14:04:06.857 回答
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 回答