将两个div放在一个内 [英] centering two divs within one

问题描述

我正在为一个完全由divs构建的表（即没有表标记）构建一个排序头。在排序头中，我有两个div，排序标题和排序方向。我想让标题水平居中。我有一个 jsfiddle ，如下所示：

I'm building a sort header for a table that's built entirely with divs (ie. no table tags). Inside the sort header, I have two divs, the sort title and the sort direction. I want to have the header horizontally centered. I have a jsfiddle that looks like this:

    <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类中心。

What's the way to do this cleanly? I know I can specify the margin and width of each element to get the desired effect but when the value of these header will change then the alignment will not be centered. I know I can also do this with jQuery by looping over the header and calculating the width of headers and titles and programmatically setting the margins of each header. I'm looking to see if there's a more general CSS-based approach that will center both the HeaderTitle and the HeaderSort inside the SomeHeader classes.

感谢您的建议。 / p>

Thanks for your suggestions.

推荐答案

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

相同的标记，但 display：inline-block 对内部div和 text-align：center 。

Same markup, but display: inline-block on the inner divs and text-align: center on the field containers.

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

这篇关于将两个div放在一个内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！