divのセットをウェブページのコンテナ中心に動的に配置する方法

Question

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を使用して行うことができますか、または私たちは入力値に基づいてコンテナのサイズ（CSSスタイル）を変更するためにJavaScriptを使用することができますか？

Answer 1

コンテナである.Container2にtext-align: center;を追加します。

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

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