How to center text with toggle switch?

[Joe Sperlak]

I'm trying to get some text centered with a toggle switch. The example given in your documentation looks straight forward but even when I try to copy that the text is offset from the toggle switch as seen in the screen shot. Everything I've tried doesn't work.

[YuvanShankar Arunagiri]

Hi Joe,

We have reviewed your requirement with the switch component with text alignment. We have prepared the code snippet to achieve your layout, which was shared in your update. Refer to the below code snippet.

@using Syncfusion.Blazor.Buttons

 

<div style="display: inline-flex;">

    <span style="align-content: center;">Notify Via</span>

    <div style="margin: 5px 15px;">

        <SfSwitch TChecked="bool" CssClass="e-custom"></SfSwitch>

        <label for="checked" style="vertical-align: super;">SMS</label>

    </div>

    <div style="margin: 5px 15px;">

        <SfSwitch Checked="true" CssClass="e-custom"></SfSwitch>

        <label for="checked" style="vertical-align: super;">Email</label>

    </div>

</div>

<style>

    .e-custom.e-switch-wrapper {

        margin-top: 10px;

    }

</style>

Output screenshot:

Please let us know if you need any further assistance on this.

Regards,

YuvanShankar A