如何將一組div放入網頁的容器中心內

我想將一組div放置在頁面的中心，其大小應根據用戶名的長度而有所不同。如何將一組div放入網頁的容器中心內

.Container1 
{ 
    display: table; 
    width: 100%; 
    padding:0; 
    margin:0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.Container2{ 
    position: absolute; 
    left:0; 
    right:0; 
    margin-right:auto; 
    margin-left:auto; 
    width:100%; 
    max-height:30px; 
    padding:0; 
    overflow:hidden; 
} 

<div id="maincontainer" runat="server" class="Container1"> 
      <div class="Container2" runat="server"> 
       <div class="leftbar"><img src="Some image" runat="server" /></div> 
       <div id="child1container" runat="server"> 
        <span class="textclass" runat="server">UserName</span> 
        <span class="textclass" id="BankName" runat="server">BankName</span> 
        <span class = "Col"> ---Some Content --- </span> 
        <span class="barBtn"> ----Logout Button---- 
        </span> 
       </div> 
       <div class="rightbar"><img src="Some image" runat="server"/></div> 
      </div> 

    </div>

Container2中的部分集合是應該集中的部分。它佔據了網頁的頂部，應位於中心，容器的寬度應根據用戶名的長度而有所不同（例如：對於較長的名稱，整個容器應調整並應位於中心）。

我想有作爲Jfiddle指定該整個容器的行爲：https://jsfiddle.net/c2t017sx/

如果你改變用戶名的長度，它會從中央保持整個容器位置中心所有的時間擴大。如果我嘗試在我的應用程序中實現與jfiddle類似的更改，則不會選擇更改。我希望所有元素都在同一行中對齊。我想知道什麼屬性需要設置爲container2和child1container，讓他們以這種方式行事。它可以使用CSS完成，或者我們可以使用JavaScript來根據輸入值更改容器大小（CSS樣式）？

來源

2017-03-08 Sriram Chandramouli

添加text-align: center;到.Container2這是容器：

.Container2 { 
    border: 1px solid black; // enable this is for test container border 
    display: table; 
    text-align: center; 
}

https://jsfiddle.net/dalinhuang/tc7kkzyz/2/

來源

2017-03-09 15:02:19

謝謝你，虐待嘗試 –

如何將一組div放入網頁的容器中心內

回答

相關問題