如何将一组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放入网页的容器中心内

回答

相关问题