2017-10-13 85 views
0

我在容器中水平放置了一組<div>的陣容,我正在尋找以我的web page(Squarespace)爲中心將我的外容器<div>類與其餘代碼對齊。如何以變化的屏幕尺寸居中div?

我編寫了一個CodePen重新創建頁面,我仍然無法以Main-content部分爲中心在outer-container範圍內調整屏幕大小。

任何幫助,非常感謝!

<section class="Main-content" data-content-field="main-content" id="yui_3_17_2_2_1507859188217_558"> 
<div class="sqs-layout sqs-grid-12 columns-12 sqs-frontend-overlay-editor-widget-host" data-type="page" data-updated-on="1507857777989" id="page-59cab354bebafb4216478596"> 
    <div class="row sqs-row" id="yui_3_17_2_2_1507859188217_669"> 
     <div class="col sqs-col-12 span-12" id="yui_3_17_2_2_1507859188217_668"> 
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_22_1507595367220_25824"> 
       <div class="sqs-block-content"> 
        <h1 align="center">Choose your subscription plan</h1> 
       </div> 
      </div> 
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_12_1507852892558_4858"> 
       <div class="sqs-block-content"> 
        <h3 style="text-align:center;color:#0083f5;">Have a MyDietGoal Promotion Code?</h3> 
       </div> 
      </div> 
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1507522278297_5479"> 
       <div class="sqs-block-content"> 



        <div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content; padding: 100px;"> 

         <div class="container container1"> 
          <div class="w-table"> 
           <div class="w-table-cell"> 
            <div class="w-container"> 
             <div class="w-card color-green"> 

              <div class="card-header"> 
               <div class="w-title" style="cursor:default"> 
                <h2><font size="7px">Novice</font></h2> 
               </div> 
               <div class="w-price" style="cursor:default"> 
                $4.99 
                <h3>/ Week</h3> 
               </div> 
               <div class="container-button"> 
                <a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a> 
               </div> 
              </div> 

              <div class="card-content" style="cursor:default"> 
               <div class="w-item" style="cursor:default"> 
                <span>Weekly </span>Meal Plans 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Personal </span>Dietary Assessment and Advice 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
               </div> 
              </div> 

             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

         <div class="container container2"> 
          <div class="w-table"> 
           <div class="w-table-cell"> 
            <div class="w-container"> 
             <div class="w-card color-blue"> 

              <div class="card-header"> 
               <div class="w-title" style="cursor:default"> 
                <h2><font size="7px">Apprentice</font></h2> 
               </div> 
               <div class="w-price" style="cursor:default"> 
                $9.99 
                <h3>/ Week</h3> 
               </div> 
               <div class="container-button"> 
                <a class="w-button" id="btn2" href="/meal-planner" target="_blank">Sign up </a> 
               </div> 
              </div> 

              <div class="card-content" style="cursor:default"> 
               <div class="w-item" style="cursor:default"> 
                <span>Weekly </span>Meal Plans 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Personal </span>Dietary Assessment and Advice 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
               </div> 
              </div> 

             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

         <div class="container container3"> 
          <div class="w-table"> 
           <div class="w-table-cell"> 
            <div class="w-container"> 
             <div class="w-card color-orange"> 

              <div class="card-header"> 
               <div class="w-title" style="cursor:default"> 
                <h2><font size="7px">Advanced</font></h2> 
               </div> 
               <div class="w-price" style="cursor:default"> 
                $14.99 
                <h3>/ Week</h3> 
               </div> 
               <div class="container-button"> 
                <a class="w-button" id="btn3" href="/meal-planner" target="_blank">Sign up </a> 
               </div> 
              </div> 

              <div class="card-content" style="cursor:default"> 
               <div class="w-item" style="cursor:default"> 
                <span>Weekly </span>Meal Plans 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Personal </span>Dietary Assessment and Advice 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
               </div> 
              </div> 

             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

        </div> 
+0

如何中心內容與動態尺寸,家長裏用動態的大小,沿兩個軸:https://stackoverflow.com/questions/6464592/how-to-align-entire-html-body-to-中心/ 35047036#35047036 –

+0

它在鋼筆上運行得非常好,但在我的網站上卻沒有!望着它 –

回答

0

我訪問了您的網頁並檢查了頁面源代碼。看起來.outer-container中的padding: 100px正在突破顯示。您必須添加像margin-left: -100px這樣的負左邊距,才能重新定位您的div

不管怎樣,你可能需要重構你的代碼和圖像移動到一個更大的父div然後應用填充那裏。

+0

哇。這是解決它。我設法通過確保內容的寬度爲100%(之前爲76.6666%)來修復其中的一部分。但它仍然沒有完全集中。是的,我必須添加負邊距以適應圖像填充。我最終不得不重構我的代碼,因爲我的解決方法是最後一個問題是通過JS插入css。無論如何,感謝您的意見。真的很感激它! –