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 に答える
0

あなたはcssコードを使用します：

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

よろしくお願いします

于 2012-10-09T12:54:22.610 に答える