I need help aligning text left right and centre in the same div, CSS HTML

StackOverflow https://stackoverflow.com/questions/18698720

Question

I am new to HTML/CSS and need some help with text aligning. THe text are link and I'd like to align two links to the left of the page and one link to the right. Can anyone help? Here is my code

BACK and HOME buttons are meant to be aligned left, and MISC is meant to be aligned right

THanks Heaps it's driving me creasy!

HTML **

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/portfolio.css">
    </head>

    <body>

        <div class="menu">
            <ul>
                <a href="index.html">BACK</a>
                <a href="index.html">HOME</a>
                <a href="index.html">MISC</a>
                </ul>
        </div>
    </body>
</html>

CSS **

body
{
    background-color: #ffffff;
}

.menu
{
    font-family:"HelveticaNeue-Light", "Arial";
    font-size: 75%;
    color: #1f4462;
    text-align:left;
    margin-left: -36px;
    margin-top: -3px;
    font-style: normal;
    letter-spacing: 1px;
    word-spacing: 3px;
}

a:link 
{
    color:#1f4462;
    text-decoration:none;
}

a:visited 
{
    color:#1f4462;
    text-decoration:none;
}

a:hover 
{
    color:#1f4462;
    text-decoration:none;
}

a:active 
{
    color:#1f4462;
    text-decoration:none;
}
Was it helpful?

Solution

Add the following css to your links. Demo

#left{
    float:left;
}

#center{
    position: absolute;
    left: 48%;
}

#right{
    float:right;
}

OTHER TIPS

use style="float:left;" for BACK and HOME buttons and style="float:right;" for MISC. Put style="display:inline;" for ul tag.

Here you go.

WORKING DEMO

The Code:

<a href="index.html" style="float: right;">MISC</a>

I hope this is what you are looking for.

<div class="menu">
        <ul>
            <a class="pull-left" href="index.html">BACK</a>
            <a class="pull-left" href="index.html">HOME</a>
            <a class="pull-right" href="index.html">MISC</a>
        </ul>
</div>

As you can see I've added classes to your links. Now lets add some class declarations to your stylesheet file:

.pull-left {
 float: left;
}

.pull-right {
 float: right;
}

HTML

<div class="menu">
            <ul>
                <a href="index.html">BACK</a>
                <a href="index.html">HOME</a>
                <a href="index.html" class="right">MISC</a>
                </ul>
        </div>

css

           .right{
            float:right;
        }

DEMO HERE

You need better structure in your HTML ... Namely, in the ul element ... You're adding list items that are not labeled as list items. The alignment issue can be fixed using the following code.

For the sake of time, I've removed the reference to an external stylesheet, and added the styles in the head tag. You can remove the styles from the head tag and readd them to the stylesheet to maintain HTML best practices.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
    <style type="text/css">
        body
            {
                background-color: #ffffff;
            }

            .menu
            {
                font-family:"HelveticaNeue-Light", "Arial";
                font-size: 75%;
                color: #1f4462;
                text-align:left;
                margin-left: -36px;
                margin-top: -3px;
                font-style: normal;
                letter-spacing: 1px;
                word-spacing: 3px;
            }

            .menu ul {

            }

            .menu ul li { display: inline-block; }

            .menu ul li.misc {
                float: right;
            }

            a:link 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:visited 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:hover 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:active 
            {
                color:#1f4462;
                text-decoration:none;
            }  
    </style>
</head>

<body>

    <div class="menu">
        <ul>
            <li><a href="index.html">BACK</a></li>
            <li><a href="index.html">HOME</a></li>
            <li class='misc'><a href="index.html">MISC</a></li>
            </ul>
    </div>
</body>

Pure CSS solution can be :

a:nth-child(3n) {
    float:right;
}

or

a:nth-last-child(1) {
    float:right;
}

Plus, write valid HTML. If you have only anchor elements for list then you have to use nav tag and there is no need of using extra div.

<body>
    <nav class="menu">
            <a href="index.html">BACK</a>
            <a href="index.html">HOME</a>
            <a href="index.html">MISC</a>
    </nav>
</body>

Remove margin-left from .menu.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top