How to center some text and right-align more text on same line?_问答_开发者

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

开发者 https://www.devze.com 2022-12-08 09:03 出处：网络

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:

相关专题：css

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.

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

The key is putting the floating element first.

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

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.

<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