This is a migrated thread and some comments may be shown as answers.

Center button text?

1 Answer 295 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 20 Sep 2014, 03:23 PM
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

1 Answer, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 24 Sep 2014, 07:48 AM
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.

 
Tags
ToolBar
Asked by
John
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or