开发者

Align text at bottom of div

Here is my CSS

.FrontSlideShow
{   
   display:block; 
   overflow: none; 
   height: 323px;
   margin-bottom: 12px; 
   background-color:#005596; 
   background-image: url(/*edited*/); 
   background-repeat: repeat-x; width:754px; font-family:   verdana; font-size:large; 
   color:#FFFFFF; 
   clear:both; 
}

.FrontSlideShow .SlideShowImage
{
   float: left; 
   vertical-align:text-bottom; 
   padding-right: 24px;
}

.FrontSlideShow .SlideShowSubTitle
{ 
    vertical-align: text-bottom;
     margin-bottom: 10px;
}

Here is the markup

    <div class="FrontSlideShow">
      <div class="SlideShowMainTitle">
        <asp:Label ID="lblSlideTitle" runat="server"></asp:Label>
      </div>
      <div class="SlideShowImage">
        <asp:Image ID="imgSlide" runat="server" />
      </div>
      <div  class="SlideShowSubTitle">            
            <asp:Label ID="lblSlideDescription" runat="server"></asp:Label>           
      </div>
        <asp:Button ID="btnPrev" runat="server" Text="Prev" /><asp:Button ID="btnNext" runat="server" Text="Next" />
        <asp:SlideShowExtender ID="slExtender" runat="server" AutoPlay="true" Loop="true" PlayInterval="3000" TargetControlID="imgSlide" NextButtonID="btnNext" PreviousButtonID="btnPrev"
             ImageTitleLabelID="lblSlideTitle" ImageDescriptionLabelID="lblSlideDescription" SlideShowServiceMethod="GetSlides" SlideShowServicePath="~/WebServices/SlideShowService.asmx">
        </asp:SlideShow开发者_JAVA技巧Extender>
        <asp:Literal ID="liMarkup" runat="server"></asp:Literal>
    </div>   

The subtitle div needs to be positioned at the bottom right of the parent container. Any ideas? But all I can get is:

Align text at bottom of div

But I want:

Align text at bottom of div


Try this:

.FrontSlideShow {
    position: relative;
}

.FrontSlideShow .SlideShowSubTitle {
    position: absolute;
    right : 20px;
    bottom: 20px;    
}


.FrontSlideShow {
     ....
     position:relative;
     ....
} 

.FrontSlideShow .SlideShowSubTitle {
      position:absolute;
      top: 300px; // your values
      left: 400px;// your values
 } 

THis way your text will always be consistent and in the same spot

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜