How to centre Title-Text?

[Al]

Hi,

I have a RadIconTile with Shape=Wide - how do you centre the title text to the vertical middle of the box?

[Marin Bratanov]

Hello Al,

You can inspect the rendered HTML in the browser dev toolbar and override the built-in CSS and use any generic approach for centering elements vertically.

Here is a basic example:

<telerik:RadTextTile runat="server" ID="RTT1" Shape="Wide" CssClass="centeredTitle" RenderMode="Lightweight">
    <Title Text="lorem ipsum"></Title>
</telerik:RadTextTile>

.centeredTitle.RadTile h6.rtileTitle
{
    /*standard approach for centering elements with position: absolute*/
    top: 50%;
    /*inspect the DOM element and see the built-in line-height value to get the numbers below*/
    margin-top: -0.46em; /*for Lightweight render mode*/
    margin-top: -7.5px; /*for Classic render mode*/
}

Regards,

Marin Bratanov
Telerik

[Al]

Thanks Marin,

I actually meant left-right centering so I used this with Classic rendering:

.centeredTitle.RadTile h6.rtileTitle
{
margin-left: 35px;
text-align:center;
}