5

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

6 回答 6

6 
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 演示

于 2012-10-09T12:56:32.420 回答
4

试试这个：

<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>
于 2012-10-09T12:50:56.280 回答
2

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

该align标签已弃用。无论如何，在这种情况下它是行不通的。

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

于 2012-10-09T12:51:36.400 回答
2

只需<center>在开始 div 之前和</center>关闭 div 之后放置。像这样：

<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>
于 2017-03-16T15:59:36.560 回答
0

您使用 css 代码：

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

最好的祝福

于 2012-10-09T12:54:22.610 回答
0

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

于 2012-10-09T13:19:08.573 回答