CODEWITHSUNDEEP
css
karen
karen

Reputation: 943

CSS Display of Potential Directory Listing

I am trying to create a page that shows a list of sub directories that will be created when a user creates a new project. I have the following code that shows the default directories, however what I would prefer is the sub directory text to be more centrally aligned to the faux directory leaf line such as the alignment "- dir" where the text is central to the line.

The code is as follows:

.file-root {
    position: relative;
    display: inline-block;
}

.file-leaf {
	display: block;
    margin-left: 1em;
    margin-bottom: 0.25em;
    width: 1em;
    height: 90%;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-bottom-left-radius: 0.5em;
}

.file-leaf-label {
    margin-left: 1em;
	text-align: bottom;
}
<div class="container-fluid">

    <div class="file-root">
        <div class="row">
            Root
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Animations
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Audio
                </div>
            </div>

        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Documents
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Media
                </div>
            </div>
        </div>
    </div>
</div>

I am not sure how to get the alignment of the text centered to the sub directory leaf line. I don't mind using a css and or js library that already does this, if thats a better solution. I am already using jquery, bootstrap and font awesome.

Upvotes: 0

Views: 831

Answers (1)

Guillaume Harari
Guillaume Harari

Reputation: 505

Try this. I have just added in .file-leaf-label :

margin-bottom: -20px;
padding : 10px;


.file-root {
    position: relative;
    display: inline-block;
}

.file-leaf {
	display: block;
    margin-left: 1em;
    margin-bottom: 0.25em;
    width: 1em;
    height: 90%;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-bottom-left-radius: 0.5em;
}

.file-leaf-label {
    margin-left: 1em;
	text-align: bottom;
    margin-bottom: -20px;
    padding : 10px;
}
<div class="container-fluid">

    <div class="file-root">
        <div class="row">
            Root
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Animations
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Audio
                </div>
            </div>

        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Documents
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Media
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions