CODEWITHSUNDEEP
htmlcsstextalignment
Pav Sidhu
Pav Sidhu

Reputation: 6944

Align text in one line?

I'm having issues trying to get this text displayed on one line, rather then 3 lines.

<h2 style="text-align:left">Policy</h2> 
<h2 style="text-align:center">Cart</h2> 
<h2 style="text-align:right">FAQ</h2>

The text comes out in separate lines, so that Police is on one line, Cart is on a second line and FAQ is on another line, however they still remain aligned left, center and right.

How would I go about displaying them on the same line but still aligned?

Upvotes: 1

Views: 24916

Answers (5)

Guilherme Soares
Guilherme Soares

Reputation: 736

//Use list

  <ul class="footer">
     <li>Policy</li>
     <li>Cart</li>
     <li>FAQ</li>
    </ul>

//In the css

    .footer{
      width:100%
      float:left;
    }
    .footer li{
      display:inline;
      margin-right:20px;
    }

Upvotes: 1

Krishnab Sarkar
Krishnab Sarkar

Reputation: 1

Use width:500% in css Any percentage according to you based on the padding will work. Try values of percentage of width according to you.... But the width property will work for sure.. That's a guarantee

Upvotes: -2

B0B0
B0B0

Reputation: 13

Use a table.

<center>
    <table>
        <tr>
        <td align="center" valign="center" cellspacing="0" cellpadding="0" border="0">
        <h2>&nbsp;<a href="put href here">Policy</a>&nbsp;<a href="put href                          here">Cart</a>&nbsp;<a href="put href here">FAQ</a>&nbsp;</h2>
        </td>
        </tr>
    </table>
</center>

Upvotes: 0

Scony
Scony

Reputation: 4138

Try to use float:

<h2 style="text-align:left;float:left;">Policy </h2>
<h2 style="text-align:center;float:left;">Cart </h2>
<h2 style="text-align:right;float:left;">FAQ</h2>

Upvotes: 1

Josh Powell
Josh Powell

Reputation: 6297

You can do a few things.

First you can add display: inline-block; like so,

h2 {
    display: inline-block;
}

Or like so,

<h2 style="display: inline-block;">Blah Blah</h2>

Now you could also float them like so,

h2 {
    float: left;
}

Or like so,

<h2 style="float: left;">Blah Blah</h2>

Upvotes: 2

Related Questions