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

Question

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

4k Views Asked by AudioBubble At 02 April 2025 at 06:10

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;
}

Original Q&A

There are 7 best solutions below

Sumit On 09 September 2013 at 12:57

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

Nitesh On 09 September 2013 at 12:57

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.

daniel.tosaba On 09 September 2013 at 12:58

<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;
}

Love Trivedi On 09 September 2013 at 13:00

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

ThaDick On 09 September 2013 at 13:05

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>

Muhammad Talha Akbar On 09 September 2013 at 13:06

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.

**Yasitha** · Accepted Answer

Yasitha On 09 September 2013 at 13:11 BEST ANSWER

Add the following css to your links. Demo

#left{
    float:left;
}

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

#right{
    float:right;
}

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

There are 7 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in ALIGNMENT

Related Questions in HYPERLINK

Related Questions in TEXT-ALIGN

Trending Questions

Popular # Hahtags

Popular Questions