如何將一組div設置爲網頁中心的動態

我想在網頁的中心放置一組div，並希望根據span級別中可用的用戶名長度從中心改變其大小。如何將一組div設置爲網頁中心的動態

.Parent1Div 
 
{ 
 
    height:60px; 
 
    display:block; 
 
    position:relative; 
 
} 
 

 
.Parent2Div{ 
 
    margin-right:auto; 
 
    margin-left:auto; 
 
    max-height:30px; 
 
    padding:0; 
 
    position: relative; 
 
    width: 100%; 
 
    -webkit-transform: translate(0%, -50%); 
 
    -ms-transform: translate(0%, -50%); 
 
    transform: translate(0%, -50%); 
 
} 
 

 
#Child2Div{ 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
#Child2Div > div{ 
 
    display: inline-block; 
 
}

<div class = "parent1div"> 
 
    
 
    \t \t <div class="parent2div" runat="server"> 
 
        <div class="Child1Div"><img src="image1.jpg" /></div> 
 
        <div id="Child2Div" runat="server" class="ColStyle"> 
 
         <span class="textclass ColStyle" id="username" runat="server"></span> 
 
         <span class="ColStyle buttonclass"> 
 
         span.....button for logout......</span> 
 
        </div> 
 
     </div> 
 
\t \t ......Some content for Menu 
 
    </div>

這裏，parent1div是主要的div和它適用於菜單內容。 Parent2Div包含一些小尺寸的圖像以及用戶名和註銷按鈕。我希望parent2div的整個div位於頁面中心的。它的寬度應該根據用戶名的大小而變化，但它應該每次都放在中心位置。名稱可以是長或短，取決於大小應該從中心增加還是減少。 ColStyle和textclass是包含文本顏色，大小和填充等基本功能的類。

我不確定我缺少什麼，但是當我使用上面的CSS時，這些div向頁面的左上角移動。如果我將parent2div的webkit轉換增加到50％，它將移動到中心位置，但寬度爲未從中心調整爲較長的名稱。相反，左側位於中心，寬度僅在右側增加（這不會使整個div的中心）。

我希望Parent2div的div的行爲方式與下面的jfiddle相同，但我不確定我錯過了什麼，當我把所有東西放在一起時，div的位置並沒有定位在中心位置並自動進行調整。

https://jsfiddle.net/xrnsmywr/

來源

2017-02-19 Sriram Chandramouli

問題是與您的命名約定 - 你是使用類，而不是標識。你剛剛得到了一些不正確的命名。

.Parent1Div應該是#parent1div,.Parent1Div應該是#parent2div。出於某種原因，您正在使用Child1Div的類，但是Child2Div的ID爲。只需確保您在HTML和CSS中使用正確的命名組合，並且可以使用`text-align：center輕鬆對齊。

要集中一個<div>（或圖像），你可以使用margin: 0 auto：

img { 
    display: block; 
    margin: 0 auto; 
}

我創建了一個小提琴展示名稱上的變化，可以發現here。

希望這會有所幫助！ :)

編輯：

修改原來的代碼後，類名和ID已更改，但他們仍然是不一致的。您需要更正.ParentDiv1至.parent1div和.ParentDiv1至.parent2div。

添加了輔助文本行，但沒有代碼實際上集中了它。您還需要添加：

.parent1div { 
    text-align: center; 
}

我創建了一個新的fiddle here。

希望這會有所幫助:)

來源

2017-02-19 22:20:05

我做了一些更新我的問題和jfiddle。我想我採用了與你所提到的相同的方式，並最終以與你所提到的相同的方式期待結果。它仍然不是集中。它被放置在左側，如果我進行-webkit-transform：translate（50％，-50％），它們將移動到中心位置，但不會位於中心並自動調整。 –

這個問題肯定是由於不一致/不正確的命名約定。請確保您有正確引用的類/ ID。嘗試諸如'＃parent1div {color：orange}'之類的東西，以確保您正確引用了您的類/ ID。 –

我已經確定ID和類在我的代碼中是一致的（就像你剛纔所說的那樣）。我在這裏發佈問題時犯了一個錯誤。對於那個很抱歉。還有其他東西被阻塞。 –

如何將一組div設置爲網頁中心的動態

回答

相關問題