0
我正在更新舊網站上的一些遺留代碼，CSS是一場噩夢。我想要做的就是讓需要時保存用戶名的div擴展一點，並保持外部div居中（水平）在頁面上。 myLabel控件是基於用戶的名字填充的（它通常不是預先定義爲John Doe）。如何水平居中未知長度的div並使用最小寬度？
目前，myContainer上的800px值和myGridB上的350px值之間，更長的用戶名正在包裝在div內。我寧願在一行顯示長名稱，如果可能，不要將其他控件撞到下一行。
我已經嘗試在myContainer和myGridB上使用最小寬度，但這隻允許div跨整個頁面展開。我發現這是this question中div的常見行爲。
我也嘗試了一些this other question中的方法，但是這會將我的標題內容推到左邊，我需要它居中。
我知道這個代碼是一個亂碼一團糟，但我明白任何想法...
ASPX：
<div class="myLogo1">
<div class="myContainer" style="width: 800px">
<div class="myGridC myLogo2 first">
<a onclick="loadMyHomePage(); "><img src="myImageAddress" /></a>
</div>
<div class="myGridB first last">
<div class="myHome myGridB first last">
<asp:Label runat="server" CssClass="myHome" ID="myLabel">
John Doe
</asp:Label>
<span class="myHome">
<asp:HyperLink NavigateUrl="mySettingsPage.aspx" runat="server">
My Settings
</asp:HyperLink>
</span>
<a href="myLogoutPage.aspx") %>">
<img src="myLogout.jpg") %>" alt="Logout" />
</a>
</div>
<div class="myGridB first last">
<div class="myGridA myPaddingA myHome">
<a href="myOtherPage" target="_blank">
<img width="180px" height="72px" src="myOther.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
CSS：
.myLogo1
{
background-color: #363636; /* #000000; */
width: 100%;
height: 125px;
}
.myContainer
{
margin-left: auto;
margin-right: auto;
width: 960px;
}
.myGridA, .myGridB, .myGridC {
display: inline;
float: left;
margin-left: 5px;
margin-right: 5px;
}
.myGridA
{
width: 190px;
}
.myGridB
{
width: 350px;
}
.myGridC
{
width: 390px;
}
.myLogo2
{
border: none 0px transparent;
padding-top: 10px;
}
.first
{
margin-left: 0;
}
.last
{
margin-right: 0;
}
.myHome
{
text-align: right;
display: block;
vertical-align: top;
float: right;
position: relative;
font-size: 9pt;
}
.myHome span
{
font-size: 9pt;
float: left;
padding: 3px 5px 0px 0px;
}
.myContainer .myPaddingA
{
padding-left: 44px;
}