3

私のウェブサイトの画像内にリンクのdivを配置するためにcss相対および絶対を使用しています。問題は、Web ページをズームイン/ズームアウトすると (または電話で Web ページを表示すると)、リンクが左右に移動することです。リンクを画像の同じ位置に保つにはどうすればよいですか?

ウェブサイト: www.cclandscaping.org

CSS コード:

.header-links {
        position: absolute;
        z-index: auto;
        right: 25%;
        top: 43%;
        font-size: x-large;
    }
    .header-pic {
        position: relative;
    }

画像とリンク コード:

<div class="header-pic"; style="text-align: center">
        <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Header.png" />
        <div class="header-links">
                <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
                &nbsp;|&nbsp; 
                <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Pages/About.aspx">About</asp:HyperLink>
                &nbsp;|&nbsp; 
                <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Pages/References.aspx">References</asp:HyperLink>
                &nbsp;|&nbsp; 
                <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Pages/ContactUs.aspx">Contact Us</asp:HyperLink>
    </div>
4

2 に答える 2

3

.header-pic幅が必要です。私もそれを中心に置きました：

.header-pic {
    margin: 0 auto;
    position: relative;
    width: 1100px;
}
于 2013-04-15T01:20:24.767 に答える