CODEWITHSUNDEEP
css
royco
royco

Reputation: 5529

How to center some text and right-align more text on same line?

I'm surprised that this has been so difficult for me. I need a single line with some text centered and the rest right-justified:

                          Centered Text                         Right Text

I doubt this matters, but "Centered Text" needs to be a <div> or <span> since I need to manipulate its content with jQuery. "Right Text" needs to be a <div> so I can apply styles to links it contains.

I've tried to float: left things, but I can't get it working. Any help would be appreciated.

Upvotes: 4

Views: 4413

Answers (4)

Michael La Voie
Michael La Voie

Reputation: 27926

<html>
    <body>
        <div style="background-color: #EEEEEE;">
            <div style="float: right;">Right Text</div>
            <div style="width: 100px; margin: 0 auto;">
                Centered Text
            </div>
        </div>
    </body>
</html>

Upvotes: 4

John Kugelman
John Kugelman

Reputation: 362167

<div style="float: right">Right Text</div>
<div style="text-align: center">Centered Text</div>

The key is putting the floating element first.

Upvotes: 7

RichieHindle
RichieHindle

Reputation: 281875

You need a container div with text-align: center, and within it a div with float:right:

<div style='text-align: center'>
<div style='float:right'>Right Text</div>
Centered text
</div>

You can wrap Centered text in a <span>, should you need to.

Upvotes: 3

ChrisR
ChrisR

Reputation: 14467

<div style="float: left; width: 65%; text-align: center">
    centered
</div>
<div style="float: left; width: 35%; text-align: justify">
    justified
</div>

Hope this helps

Upvotes: 1

Related Questions