Html/CSS aligning the text of a label

Question

Html/CSS aligning the text of a label

894 views Asked by yorgo At 14 August 2013 at 14:42

I try to use html+CSS to present a directory tree structure. What I am missing is how to align the size and data of each file in specific horizontal positions.

This might be cleared of you take a look at the code below. At the 10th line there is "File1 8MB 01/12/2010". How can I align "8MB" to the center and "01/12/2010" to the right side?

After the html I attach the CSS in case it helps. I am new at this so thanks for your help and patience.

<body>
<div>
                                            Size                        Date
</div>

    <ol class="tree">
        <li>
            <label for="folder1">Folder1</label> <input type="checkbox" checked disabled id="folder1" /> 
            <ol>
                <li class="file">File1 8MB 01/12/2010</li>
                <li>
                    <label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" /> 
                    <ol>
                        <li class="file">File1 8MB 01/12/2010</li>
                        <li>
                            <label for="subsubfolder1">Subfolder1</label> <input type="checkbox" id="subsubfolder1" /> 
                            <ol>
                                <li class="file">File2 8MB 01/12/2010</a></li>
                                <li>
                                    <label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" /> 
                                    <ol>
                                        <li class="file">Subfile1 8MB 01/12/2010</li>
                                        <li class="file">Subfile2 8MB 01/12/2010</li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                        <li class="file">File3 8MB 01/12/2010</li>
                        <li class="file">File4 8MB 01/12/2010</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>

</body>

Here is the CSS in case it helps:

/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }

body, form, ul, li, p, h1, h2, h3, h4, h5
{
    margin: 0;
    padding: 0;
}
body { background-color: #606061; color: #ffffff; margin: 0; }
img { border: none; }
p
{
    font-size: 1em;
    margin: 0 0 1em 0;
    white-space: pre
}
div{white-space: pre-wrap;}

html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }

/* CSS Tree menu styles */
ol.tree
{
    padding: 0 0 0 30px;
    width: 900px;
}
    li 
    { 
        position: relative; 
        margin-left: -15px;
        list-style: none;
    }
    li.file
    {
        margin-left: -1px !important;
    }
        li.file a
        {
            background: url(document.png) 0 0 no-repeat;
            color: #fff;
            padding-left: 21px;
            text-decoration: none;
            display: block;
        }

    li input
    {
        position: absolute;
        left: 0;
        margin-left: 0;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
        height: 1em;
        width: 1em;
        top: 0;
    }
        li input + ol
        {
            background: url(toggle-small-expand.png) 40px 0 no-repeat;
            margin: -0.938em 0 0 -44px; /* 15px */
            height: 1em;
        }
        li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
    li label
    {
        background: url(folder-horizontal.png) 15px 1px no-repeat;
        cursor: pointer;
        display: block;
        padding-left: 37px;
    }

    li input:checked + ol
    {
        background: url(toggle-small.png) 40px 5px no-repeat;
        margin: -1.25em 0 0 -44px; /* 20px */
        padding: 1.563em 0 0 80px;
        height: auto;
    }
        li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
        li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

Original Q&A

There are 3 answers

**CaribouCode** · Answer 1 · 2013-08-14 14:49:36

If it were me, I wouldn't structure the code like that. But you can still do it with the code you've got plus a couple more spans and the following CSS (using absolute positioning):

HTMl example:

<ol>
    <li class="file">
        <span class="leftPos">File1</span> 
        8MB 
        <span class="rightPos">01/12/2010</span>
    </li>
</ol>

CSS

li { 
    position: relative;
    display: block;
    text-align: center; }

li span.rightPos { position:absolute; right:0; }
li span.leftPos { position:absolute; left:0; }

Fiddle: http://jsfiddle.net/ntqJd/

**Jrey Quiros** · Answer 2 · 2013-08-14 14:56:48

in your case, you could use table tags.

 <ol>
    <li>
        <table>
            <tr>
                <td>File1</td>
                <td>8MB</td>
                <td>01/12/2010</td>
            </tr>
        </table>
    </li>
</ol>

**Kai Feller** · Answer 3 · 2013-08-14 15:19:22

I would use a table if I were you, it would make things alot simpler:

<html>
<head>
<style>
    table {
        width: 400px;
        margin: 0 auto;
    }
    .centerText {
        text-align: center;
    }
</style>
</head>
<body>
<table>
    <tr>
        <th></th>
        <th>Size</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>File 1</td>
        <td class="centerText">5MB</td>
        <td class="centerText">01/12/2010</td>
    </tr>
</table>
</body>
</html>

The margin: 0 auto is just to center the table in the page.

Hope this helps.

TechQA.

Html/CSS aligning the text of a label

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in ALIGNMENT

Related Questions in DIRECTORY-TREE

Popular Questions

Popular Tags

Trending Questions