css3以动态内容居中div答案

【问题标题】：css3 centering the div with dynamic contentcss3以动态内容居中div
【发布时间】：2012-10-12 11:39:47
【问题描述】：

我正在使用 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 里面有两个段落标签，因为一个段落标签的内容是动态的，所以它的宽度在加载页面时可能会改变，我如何将该 div 与“DivToBeCentered”类居中对齐到它的父级。如果你解决了这个问题，对我会更有帮助，我今天被困在这个问题上。提前谢谢

【问题讨论】：

可以指定要居中的div的宽度吗？
div 的宽度是动态的，因为要居中的 div 内的段落标签包含来自数据库的内容。
给那个 div 一个最小宽度。 & 应用边距：0 auto;
@SVS 我像你建议的那样给出它不起作用，现在我尝试了 firefox.element.style { margin: 0 auto;最小宽度：10px； }
查看我在回答中提供的演示

标签： html css alignment

【解决方案1】：

简单的解决方案是display: inline-block; 到DivToBeCentered 和text-align:center; 到outer div

DEMO

要更改的 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>

【讨论】：

【解决方案2】：

试试这个：

<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;
}

【讨论】：