Html 将两个div集中在一个div内

我正在为一个完全用div构建的表（即没有表标记）构建一个排序头。在排序头中，我有两个div，排序标题和排序方向。我想让标题水平居中。我有一个看起来像这样：

    <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;}

sort1
▾
sort2
▾
​
.一些头{
宽度：90px；
浮动：左；
背景：红色；
颜色：白色；
行高：20px；}
.其他人{
宽度：120px；
浮动：左；
背景：黑色；
颜色：白色；
行高：20px；}
.HeaderTitle{float:left；}
.HeaderSort{float:left；}

干净利落的方法是什么？我知道我可以指定每个元素的边距和宽度以获得所需的效果，但当这些标题的值发生变化时，对齐方式将不会居中。我知道我也可以通过jQuery在标题上循环，计算标题和标题的宽度，并通过编程设置每个标题的边距来实现这一点。我想看看是否有一种更通用的基于CSS的方法可以将HeaderTitle和HeaderSort集中在SomeHeader类中

---

谢谢你的建议。

用另一个div包装这两个标题div，然后给该div一个边距：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>

---

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

标题排序

div

似乎没有必要。难道不是这样吗

更新答案：

使用包装器

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

相同的标记，但在内部div上显示：inline block，在字段容器上显示

文本对齐：居中

.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;}

@卡尔佩奇：已经完成了？？；我有这个问题！我不完全理解，你能举例说明你想要它应该是什么样子吗？@ ITSM:我想把单词和图标集中在黑色和红色div的中间。这是我最初想到的，但实际上，代替上/下文本符号，我想使用我将放入DIV头排序的自定义设计。这就是我碰到这个问题的原因。好的，谢谢！我也已经摆弄了一段时间了；看起来很简单，但我还没弄明白。
.wrap {width: 220px; margin: auto;}

.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;}