2

私はcss3でモバイルHTML5ページを開発しています、私は以下のようなページを持っています

<!DOCTYPE html>
<html>
    <head>
        <title>Starter page</title>
        <style>
            .float-right{float:right}
            .float-left{float:left}
            .clear{clear:both}
        </style>
    </head>

    <body>
    <div class="content" id="home">

            <div class=" ">
            <!--START: Div to be centered to page-->
                <div class="DivToBeCentered">
                    <div class="float-left">
                        <!--START: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                        <p class="">dynamic para 1 with background image</p>
                        <!--END: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                    </div>
                    <div class=" float-left">
                        <p class="">static para 2 without background image</p>
                    </div>
                    <div class="clear"></div>
                </div>
            <!--END: Div to be centered to page-->
            </div>

    </div>
    </body>
</html>

上記のコードのクラス「DivToBeCentered」のdivをその親divに水平方向に中央揃えにします。そのdiv内には2つの段落タグがあります。1つの段落タグのコンテンツは動的であるため、ページの読み込み中に幅が変わる可能性があります。そのdivをその親のクラス「DivToBeCentered」に中央揃えするにはどうすればよいですか。あなたがこれを解決するならば、それは私にとってより役立つでしょう、私はその日この問題で立ち往生しました。よろしくお願いします

4

2 に答える 2

3

簡単な解決策はdisplay: inline-block;、DivToBeCenteredとdivtext-align:center;になりますouter

デモ

変更されるCss

.outer {text-align:center;}
.DivToBeCentered {display: inline-block;}




<html>
    <head>
        <title>Starter page</title>
        <style>
            .float-right{float:right}
            .float-left{float:left}
            .clear{clear:both}
          .outer {text-align:center;}
          .DivToBeCentered {display:block-inline}
        </style>
    </head>

    <body>
    <div class="content" id="home">

            <div class="outer">
            <!--START: Div to be centered to page-->
                <div class="DivToBeCentered">
                    <div class="float-left">
                        <!--START: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                        <p class="">dynamic para 1 with background image</p>
                        <!--END: This paragraph content is dynamic from database, i want to center align the div with the class 
                                    DivToBeCentered with reference to its parent-->
                    </div>
                    <div class=" float-left">
                        <p class="">static para 2 without background image</p>
                    </div>
                    <div class="clear"></div>
                </div>
            <!--END: Div to be centered to page-->
            </div>

    </div>
    </body>
于 2012-10-12T12:15:31.687 に答える
1

これを試して：

<div class="content" id="home">
        <!--START: Div to be centered to page-->
            <div class="DivToBeCentered">
                <div class="float-left">
                    <!--START: This paragraph content is dynamic from database, i want to center align the div with the class 
                                DivToBeCentered with reference to its parent-->
                    <p class="">dynamic para 1 with background image</p>
                    <!--END: This paragraph content is dynamic from database, i want to center align the div with the class 
                                DivToBeCentered with reference to its parent-->
                </div>
                <div class=" float-left">
                    <p class="">static para 2 without background image</p>
                </div>
                <div class="clear"></div>
            </div>
        <!--END: Div to be centered to page-->
</div>

CSS：

.content{
  position: relative;
}

.DivToBeCentered{
  position: absolute;
  left: 0;
  right: 0;
  /*for vertical centering*/
  /*
  top:0;
  bottom:0;
  */
  margin: auto;
}
于 2012-10-12T12:11:53.637 に答える