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>

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 demo

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>

Answer 3

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

align代码is deprecated。无论如何，它在这种情况下不起作用。

使用display: inline-block;代替float: left;（当然，请删除display: inline;部分）。浮动元素不可以居中。

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>

Answer 5

您使用css代码：

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

最好的问候

Answer 6

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

HTML - 居中DIV内容

6 个答案: