Div number alignment

[Joshna Lingala Uthama Reddy Lingala]

Hi Belle, 

 

Greetings from Syncfusion. 

 

We suggest you use the table structure to align the values properly, refer the below link for your reference 

https://stackoverflow.com/questions/13992026/how-to-center-right-aligned-numbers-in-table-column-using-css 

 

Please find the solution below. 

 

Code Snippets: 

<div class="container4"> 

    <div> 

        <table width="1000px"> 

            <thead> 

                <tr> 

                    <td>Tab1</td> 

                    <td>Tab2</td> 

                    <td>Tab3</td> 

                    <td>Tab4</td> 

                    <td>Tab5</td> 

                    <td>Tab6</td> 

                    <td>Tab7</td> 

                    <td>Tab8</td> 

                    <td>Tab9</td> 

                </tr> 

            </thead> 

            <tr> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

            </tr> 

        </table> 

        <p style="text-align:center"> 

            ViewAll 

            Deposited 

            Trashbin 

            Mon-14 

            Tue-15 

            Wed-16 

            Thu-17 

            Fri-18 

            Sat-19 

        </p> 

        <table width="1000px"> 

            <tr> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

                <td>0</td> 

            </tr> 

        </table> 

    </div> 

</div> 

 

<style> 

    .container4 { 

        display: flex; 

        background-color: black; 

    } 

 

    .container4 div { 

        align-items: center; 

        padding-top: 5px; 

        padding-left: 60px; 

        padding-right: 60px; 

        font-size: 19px; 

        font-weight: bolder; 

        color: white; 

    } 

</style> 

Output: 

 

 

 

Kindly try with the able information, if that doesn’t meet your requirement, please share the entire element structure to validate further and provide prompt solution at the earliest. 

 

Regards, 

Joshna L 

[Belle Cruz]

I want to align the  42 under View All same as other numbers displayed.

I am using css.

.container4 {

    display: flex;

    background-color: black;

}

    .container4 div {

        align-items: center;

        padding-top: 5px;

        padding-left: 60px;

        padding-right: 60px;

        font-size: 19px;

        font-weight: bolder;

        color: white;

    }