0

古い W​​eb サイトのレガシー コードを更新していますが、CSS が悪夢です。私がやりたいのは、必要に応じてユーザー名を保持する div を少し拡張し、外側の div をページの中央 (水平方向) に保つことだけです。myLabel コントロールは、ユーザーの名前に基づいて入力されます (通常、John Doe として事前定義されていません)。

現在、myContainer の 800px 値と myGridB の 350px 値の間で、より長いユーザー名が div 内でラップされています。長い名前を 1 行に表示し、可能であれば他のコントロールを次の行に表示したくありません。

myContainer と myGridB で min-width を使用してみましたが、それでは div をページ全体に拡張できます。これは、この質問の div の一般的な動作です。

この他の質問でもいくつかの方法を試しましたが、ヘッダーのコンテンツが左に押し出されたため、中央に配置する必要があります。

このコードが文字化けしていることは承知していますが、アイデアをいただければ幸いです…</p>

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;
}
4

1 に答える 1

0

アイデアの場合、通常、div を水平方向に中央揃えする方法は、コンテナーを特定の % 幅に設定することです。次に、margin: auto; を使用します。それが役に立ったことを願っています。

于 2013-02-15T21:38:11.350 に答える