Home/ Questions/Q 7649531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T10:59:24+00:00

Is it possible to horizontally center align some text if it fits in a

  • 0

Is it possible to horizontally center align some text if it fits in a single line, but do not do center align and do white-space: normal if it takes up multiple lines (preferrably, but not necessarily, without javascript)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is an HTML+CSS solution.

    The tricks are:

    1. The <span> inside <p> has the display: inline-box; property so it will shrink to the size of its content.

    2. The <p> has text-align: center so the <span> will be centred if the size of the <span> is less than the width of the <p>.

    3. The <span> has text-align: left so the text will actually be left-aligned.

    <!DOCTYPE html> <html>
    <head>
        <title>Center</title>
        <style type="text/css">
            .big-box {
                text-align: center;
                width: 40em;
                border: 1px solid red;
            }
            .center-if-single-line {
                text-align: left;
                display: inline-block;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>Small</h1>
            <p class="big-box">
                <span class="center-if-single-line">
                    All your line are belong to us!
                </span>
            </p>
            <h1>Big</h1>
            <p class="big-box">
                <span class="center-if-single-line">
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                </span>
            </p>
        </div>
    </body>
</html>
    • 0