Question

我正在为一个完全用div构建的表构建一个排序标题（即没有表标签）。在排序标题内，我有两个div，排序标题和排序方向。我希望标题水平居中。我有一个 jsfiddle ，如下所示：

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

    <div class="SomeOtherHeader">
       <div class="HeaderTitle">sort2</div>
       <div class="HeaderSort">&nbsp;▾</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类中。

感谢您的建议。

Answer 1

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

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

Answer 2

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

相同的标记，但内部div上为display: inline-block，字段容器上为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;}

Answer 3

用另一个div包装这两个标题div然后giv表示一个余量：0 auto。

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

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

CSS：

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

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

Answer 4

使用包装器！

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

CSS：

.wrap {width: 220px; margin: auto;}

将两个div放在一个中心

4 个答案: