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>

我想将 div 与上面代码中的“DivToBeCentered”类水平居中对齐到它的父 div。在那个 div 里面有两个段落标签，因为一个段落标签的内容是动态的，所以它的宽度在加载页面时可能会改变，我如何将该 div 与“DivToBeCentered”类居中对齐到它的父级。如果你解决了这个问题，对我会更有帮助，我今天陷入了这个问题。在此先感谢

4

2 回答 2

3

simple solution will be display: inline-block; to the DivToBeCentered and text-align:center; to the outer div

DEMO

Css to be changed

.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 回答