How to centre Title-Text?

3 posts, 0 answers
  1. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 28 Jun Link to this post

    Hi,

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

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 28 Jun Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 28 Jun in reply to Marin Bratanov Link to this post

    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;
    }

     

     

Back to Top