HTML - 居中 DIV 内容答案

【问题标题】：HTML - Centering DIV contentHTML - 居中 DIV 内容
【发布时间】：2012-09-29 19:19:01
【问题描述】：

我正在尝试使用类 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>

【问题讨论】：

你的 div 居中。但它也是 100% 宽...
如果内容具有浮动属性，则不能将 test1 的内容居中。此外，如果它是浮动的，则不需要 display:inline;要么作为浮动应用此
@DannyHearnah 他没有漂浮div.test1
@Bondye 不，他在浮动test2，这是test1 的内容/子项
@DannyHearnah 那又怎样？当然，您可以将包含浮动成员的 div 居中。你只需要一个clearfix。

标签： html css

【解决方案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 demo

【讨论】：

尽管我删除了 IE 7 修复并使用了 display:inline，但这种方式给了我正确的答案。它适用于我提供的测试，但不适用于安全数据（我无法显示）
如果您遇到样式问题，display:inline-block 比display:inline 为样式元素提供更大的灵活性和控制力。在某些情况下，将 div 设置为 display:inline 可能无法按预期工作。

【解决方案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>

【讨论】：

test1 的内容将不再彼此相邻对齐。因此 OP 使用浮动将 div 对齐在一起

【解决方案3】：

简单地使用 align=center 发生了什么？

align 标签is deprecated。无论如何，在这种情况下它是行不通的。

使用display: inline-block; 而不是float: left;（当然要删除display: inline; 部分）。浮动元素不能居中。

【讨论】：

你在几秒钟内击败了我 :) 不过，我要说的是加 1
我怀疑那些反对票来自那些希望他们的答案浮到顶部的人。我可能错了;请随时发表评论。

【解决方案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>

【讨论】：

【解决方案5】：

你使用 css 代码：

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

最好的问候

【讨论】：

【解决方案6】：

Div 是块级元素。跨度是内联的。考虑一个更大的 div 并跨越内部的较小元素。

【讨论】：