Center text inside a DIV using CSS

nedash
 
on Aug 12, 2016 02:35 AM
2243 Views

hi

I used pagination for datalist below are codes:

<asp:Repeater ID="rptPager" runat="server">
     <ItemTemplate>
         <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>' CssClass='<%# Eval("CssClass") %>' OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>
     </ItemTemplate>
</asp:Repeater>

and behind code:

 

 

public class PagerPage
    {
        public PagerPage(string text, string value)
        {
            Text = text;
            Value = value;
        }
        public PagerPage(string text, string value, bool enabled)
        {
            Enabled = enabled;
            Text = text;
            Value = value;
            CssClass = enabled ? "pager" : "active_pager";
        }
        public PagerPage(string text, string value, string cssClass)
        {
            CssClass = cssClass;
            Text = text;
            Value = value;
        }
        public PagerPage(string text, string value, bool enabled, string cssClass)
        {
            Enabled = enabled;
            CssClass = cssClass;
            Text = text;
            Value = value;
        }
        public bool Enabled { get; set; }
        public bool Selected { get; set; }
        public string Text { get; set; }
        public string Value { get; set; }
        public string CssClass { get; set; }
    }
    private void PopulatePager(int recordCount, int currentPage)
    {

        double dblPageCount = (double)((decimal)recordCount / (decimal)PageSize);
        int pageCount = (int)Math.Ceiling(dblPageCount);
        List<PagerPage> pages = new List<PagerPage>();
        if (pageCount > 0)
        {

            pages.Add(new PagerPage("&nbspاولین&nbsp&nbsp&nbsp", "1", currentPage > 1, "button"));

            if (pageCount < 4)
            {
                for (int i = 1; i <= pageCount; i++)
                {
                    pages.Add(new PagerPage(i.ToString(), i.ToString(), i != currentPage));
                }
            }
            else if (currentPage < 4)
            {
                for (int i = 1; i <= 4; i++)
                {
                    pages.Add(new PagerPage(i.ToString(), i.ToString(), i != currentPage));
                }
                pages.Add(new PagerPage("...", (currentPage).ToString(), false, "button1"));
            }
            else if (currentPage > pageCount - 4)
            {
                pages.Add(new PagerPage("...", (currentPage).ToString(), false, "button1"));
                for (int i = currentPage - 1; i <= pageCount; i++)
                {
                    pages.Add(new PagerPage(i.ToString(), i.ToString(), i != currentPage));
                }
            }
            else
            {
                pages.Add(new PagerPage("...", (currentPage).ToString(), false));
                for (int i = currentPage - 2; i <= currentPage + 2; i++)
                {
                    pages.Add(new PagerPage(i.ToString(), i.ToString(), i != currentPage));
                }
                pages.Add(new PagerPage("...", (currentPage).ToString(), false));
            }


            pages.Add(new PagerPage("&nbspآخرین&nbsp&nbsp", pageCount.ToString(), currentPage < pageCount, "button"));
        }

        rptPager.DataSource = pages;
        rptPager.DataBind();

    }

and css:

 

.pager {

     background:url(../image/Main/PageN.png) no-repeat;
    color: #ababab;
    height: 27px;
    min-width:27px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font: 13px behtop_Yekan;
    margin-top: 1px;
}
             
    
.active_pager {

    color: white;
    height: 27px;
    min-width: 27px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font: bold 13px behtop_Yekan;
     background:url(../image/Main/PageNA.png) no-repeat;
}

.button {
    color: #ababab;
    height: 27px;
    min-width: 51px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font: 14px behtop_Yekan;
    background: url(../image/Main/PageFL.png) no-repeat;
}

see below image:

as you see number of pages are top of div I want it be middle of div I add this code to css:

vertical-align:middle;

but it doesn't do any things...

how I can put text at middle of div?

Best Regards

Neda

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 12, 2016 04:13 AM
on Aug 12, 2016 04:14 AM

Hi nedash,

Change the display: inline-block to table-cell and add vertical-align: middle for button, button1, pager and active_pager class.

vertical-align: middle;
display: table-cell;