CSS3中心與動態內容

我正在開發使用CSS3移動HTML5頁面的DIV，我遇到的頁面類似下面CSS3中心與動態內容

<!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」對齊。如果你解決這個這將是對我更有幫助，我被困在這個問題上的day.Thanks提前

來源

2012-10-12 Mohamed Hussain

您可以指定要居中的div的寬度？ – Champ

div的寬度是動態的，因爲要居中的div內的段落標記具有來自數據庫的內容。 –

給出該div的最小寬度。＆應用邊距：0 auto; – SVS

簡單的解決方案將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>

來源

2012-10-12 12:15:31 Champ

優秀答案冠軍....非常感謝您的幫助....這麼簡單... –

試試這個：

<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-12 12:11:53 mallendeo

CSS3中心與動態內容

回答

相關問題