Center button text?

2 posts, 0 answers
  1. John
    John avatar
    41 posts
    Member since:
    Jun 2008

    Posted 20 Sep 2014 Link to this post

    Hi all:

    I have a RadToolBar on an ASP.NET Ajax page and expanded the toolbar width to 1280, setting the 9 buttons to widths of 100 to spread them out. I selected the Office2010 silver skin, is there a way to set the button text to be centered? When I run now the text is left-aligned.

    John
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Sep 2014 Link to this post

    Hello John,

    There are several ways to achieve centralization of button text:
    1. If you set the property ImagePosition to AboveText, the CSS styles for centering the text will apply from inbuilt styles so you do not have to add any additional CSS. In this solution, the width of the button is set by the control's property Width.

    2. If you are using images and the previous solution do not meet your expectations, you can apply the following CSS
      html .RadToolBar .rtbIn {
          padding-right: 20px;
          position: relative;
          text-align: center;
      }
       
      html .RadToolBar .rtbChoiceArrow {
          position: absolute;
          top: 50%;
          right: 0;
          margin-top: -9px;
      }
       In this solution, the width of the button is set by the control's property Width as well.

    3. If you do not set the width of the button by its property, you can set it by a CSS rule. Then you can add only a rule for aligning the text.
      html .RadToolBar .rtbText {
          width: 65px;
          text-align: center;
      }


    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top