Css Div與div對齊

我想在底部居中的黑色矩形中顯示文本「跳過 - 我不能確定」Aprear。我很難與Css一起完成這項工作。你能指出如何解決我的CSS？Css Div與div對齊

Screenshot

defaultpage

<div id="pictures"> 
      <div id="MainPics"> 
     <div id="RightPic"> 
      <p> 
       <asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label> 
      </p> 
      <asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" /> 
     </div> 
     <div id="LeftPic"> 
      <p> 
       <asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" 
        Font-Bold="True"></asp:Label> 
      </p> 
      <asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" /> 
     </div> 
    </div> 
    <div id="skip"> 
     <a href="default.aspx">SKIP - I Cant Choose.</a></div> 
</div>

的CSS

div#pictures 
    { 
    } 
    div#MainPics 
    { 
     height: 650px; 
     width: 60%; 
     -moz-border-radius: 35px; 
     border-radius: 35px; 
     background-color: Black; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    #RightPic 
    { 
     position: relative; 
     float: left; 
     width: 45%; 
     text-align: center; 
    } 
    #LeftPic 
    { 
     position: relative; 
     float: left; 
     width: 45%; 
     text-align: center; 
    } 
    div#skip 
    { 
     position: relative; 
     width: 50%; 
     margin-left: auto; 
     margin-right: auto; 
     text-align: center; 
    }

來源

2011-12-20 CsharpBeginner

不要給ASP 。轉到瀏覽器中的頁面並轉到查看源代碼（通常是右鍵菜單），然後更新您的帖子。（我不能在[fiddle]（http://jsfiddle.net/CLh6L/）中使用ASP）。 – FakeRainBrigand 2011-12-20 15:06:50

給HTML和CSS，而不是ASP。這樣用戶將能夠更快地幫助你。 – techfoobar 2011-12-20 15:10:51

簡單的解決方案「跳過」鏈接，將跳過的DIV的Mainpics DIV中：

<div id="pictures"> 
    <div id="MainPics"> 
     <div id="RightPic"> 
      <p> 
       <asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label> 
      </p> 
      <asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" /> 
     </div> 
     <div id="LeftPic"> 
      <p> 
       <asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" 
        Font-Bold="True"></asp:Label> 
      </p> 
      <asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" /> 
     </div> 
     <div id="skip"> 
      <a href="default.aspx">SKIP - I Cant Choose.</a> 
     </div> 
    </div> 
</div>

來源

2011-12-20 15:16:05 itodd

如果你想讓它留在任何時候的底部，你將需要設置跳到定位絕對

#pictures { position:relative } 
#skip { position:absolute; bottom:5px; /*5px for a bit of spacing*/ }

來源

2011-12-20 15:07:31 vmex151

這是完美的地方，但它禁用了居中代碼我是否必須絕對設置？ margin-left：auto; margin-right：auto; text-align：center; – CsharpBeginner 2011-12-20 15:12:03

是的。或者您可能會因負頂部邊距而陷入局面 – vmex151 2011-12-20 15:19:44

你不需要#MainPics div。只需將您擁有的#Mainpics的CSS移動到#pictures div即可。這裏有一個小提琴在底部----->HERE

來源

2011-12-20 15:12:26 Scott

div#skip 
{ 
    top:-30px; 
    position:relative; 
    ... 
}

來源

2012-11-07 15:01:53 extremeFE

請提供您的代碼的解釋 – brimborium 2012-11-07 15:22:22

Css Div與div對齊

回答

相關問題