html - How can I centre items inside a list item?

Question

I have the following html:

<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li *ngIf="showDeltaButton()">
        <a class="col-sm-1" pTooltip="delta geometry" tooltipPosition="bottom" (click)="showDeltaGeometry()">
            <i [style.color]="navBar.getIconStyle(showDelta)" class="fa fa-window-restore"></i>
            <span [style.color]="navBar.getIconStyle(showDelta)">Delta</span>
        </a>
    </li>

    <li>
        <a class="col-sm-1" pTooltip="model" tooltipPosition="bottom" (click)="openCameraPanel()">
            <i [style.color]="navBar.getIconStyle(showCameraPanel)" class="fa fa-camera-retro"></i>
            <span [style.color]="navBar.getIconStyle(showCameraPanel)">Camera</span>
        </a>
    </li>


    ...

    <li>
        <a class="col-sm-1" pTooltip="close" tooltipPosition="bottom" (click)="closeDialog()">
            <i class="fa fa-close"></i>
            <span>Close</span>
        </a>
    </li>
</ul>

and this is the result using bootstrap 4:

but I would like the layout to be like:

With the a, i and span elements horizontally centred inside the li.

How can I do that?

question from:https://stackoverflow.com/questions/65923324/how-can-i-centre-items-inside-a-list-item

Answer 1

FYI: I managed to answer my own question after a little digging into the bootstrap 4 documentation. It is necessary to add the class "text-center" to the i and spam elements. I am posting the solution in the hope it will help someone facing the same problem.

HTML:

<ul class="navbar-nav">
        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
            <li *ngIf="showDeltaButton()">
                <a class="col-sm-1" pTooltip="delta geometry" tooltipPosition="bottom" (click)="showDeltaGeometry()">
                    <i [style.color]="navBar.getIconStyle(showDelta)" class="fa fa-window-restore text-center"></i>
                    <span [style.color]="navBar.getIconStyle(showDelta)" class="text-center">Delta</span>
                </a>
            </li>

            <li>
                <a class="col-sm-1" pTooltip="model" tooltipPosition="bottom" (click)="openCameraPanel()">
                    <i [style.color]="navBar.getIconStyle(showCameraPanel)" class="fa fa-camera-retro text-center"></i>
                    <span [style.color]="navBar.getIconStyle(showCameraPanel)" class="text-center">Camera</span>
                </a>
            </li>

            ...

            <li>
                <a class="col-sm-1" pTooltip="close" tooltipPosition="bottom" (click)="closeDialog()">
                    <i class="fa fa-close text-center"></i>
                    <span class="text-center">Close</span>
                </a>
            </li>
        </ul>
    </ul>

CSS:

li>a>i.fa {
    display: block;
}

li>a>span {
    display: block;
}