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完成，或者我们可以使用javascript根据输入值改变容器大小（CSS样式）吗？

Answer 1

将import Foundation import RxSwift import RxCocoa //code insert here!!添加到text-align: center;这是容器：

.Container2

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

如何动态地将一组div放在网页的容器中心内

1 个答案: