HTML - 居中DIV内容

Question

我试图使用类test1来跨越并将div的内容居中。将div横跨整个页面宽度可以实现，但是无法使div内的内容居中。使用align=center的方法可行吗？

<style>
    div.test1
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    div.test2
    {
        display: inline;
        float: left;
    }
</style>

<div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>

- craig1231

---

你的 div 已经居中了。但它也是100%宽... - Ron van der Heijden

如果test1的内容带有浮动属性，则无法居中内容。另外，如果它是浮动的，那么display:inline;也不需要，因为浮动已经实现了这个效果。 - CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

@DannyHearnah 他不是浮动的 div.test1 - Ron van der Heijden

@Bondye 不是他正在浮动 test2，而是 test2 是 test1 的内容/子元素。 - CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

@DannyHearnah 那又怎样？当然你可以居中包含浮动成员的 div。你只需要一个 clearfix。 - Ron van der Heijden

@Bondye 浮动内容不会居中，只有父元素会居中，浮动内容将根据您分配的浮动方式对齐。test2始终位于test1内部的左侧 - 尽管再次阅读OP，我可能误解了请求。所以你是正确的，父元素是居中的，- 当然。我认为请求是要在100％宽度的父级test1内使子级（test2）居中。 - CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Answer 1

div.test1 {
    text-align: center;
}
div.test2 {
    display: inline-block;
    *display: inline; /* IE7 fix for inline-block */
    *zoom: 1;         /* IE7 fix for inline-block */
}

jsfiddle演示

- Matt Coughlin

---

这种方法给了我正确的答案，尽管我删除了IE 7修复程序并使用了display:inline。它对我进行的测试有效，但对于保密数据（我不能展示）无效。 - craig1231

如果您遇到样式问题，display:inline-block比display:inline更具有灵活性和控制元素的样式。在某些情况下，将div设置为display:inline可能无法按预期工作。 - Matt Coughlin

Answer 2

试试这个：

<style>
    div.test1
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

</style>

<div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>

- mr.soroush

---

test1的内容将不再相互对齐。因此，OP使用浮动来使divs彼此对齐。 - CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Answer 3

“align=center” 这种方式不见了，为什么？

“align” 标签已经过时。而且在这种情况下也无法使用。

请使用 display: inline-block; 替代 float: left;（当然，要删除 display: inline; 部分）。浮动元素是无法居中的。

- Chris

---

你比我快几秒钟 :) 不过，还是加1，因为这就是我要说的。 - Dave

我怀疑那些负评来自于想让他们的答案浮现在顶部的人。我可能是错的；请随意留言。 - Chris

Answer 4

只需要在div开始之前加上<center>，在div关闭之后加上</center>即可。像这样：

<center>
    <div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>
</center>

- Ian David Bocioaca

Answer 5

你使用的CSS代码是：

.test1 .test2{
   width:100%;
   text-align:center;
 }

最好的祝福

- Saeed

Answer 6

是块级元素。 是内联的。考虑将较大的

包含较小的元素。

- A McGuinness