How center align and format text for folder and files in Vue App to be the same as windows folder structure?

Building a file and folder structure for a web application using Vue. Is there a way to center align the text for the file and folder icons and format them in a way that is similar to Windows folder and file structure?

Currently the text seems to left-align with the icons. I want the file structure to look something like this where the text is center aligned and wraps in a vertical manner with the intent to make the icons and text orderly and symmetrical to each other.

I tried adding an id in the div tag that handles the rendering for the text and center aligning it but it has no effect. Here is the code:

<template>
<div id="folder-file-view" v-if="!isEditing">

    <div class="folderSelect ml-3 mr-3" @click="folderFinder(folder)" v-for="folder in DisplayedFolders" style="display:inline-block">

        <div>
             <i class="material-icons wf-edit" id="folder-icons" v-if="folder.DisplayIcon =='folder' ">folder</i>
             <i class="fas fa-file" id="file-icons" v-if="folder.DisplayIcon !='folder' "></i>
        </div>

        <div id="icon_text">
            {{folder.DisplayText}} <!-- Renders the text below the file or folder -->
        </div>

    </div>

</div>
</template>

<style scoped>
    #folder-icons {
        font-size: 70px;
    }
    #file-icons {
        font-size: 50px;
    }
    #icon_text {
        text-align: center;
    }

</style>