CODEWITHSUNDEEP
htmlcss
Jed
Jed

Reputation: 1733

CSS Width Limit

How can I make h3 tag appear like this?

enter image description here

I tried to apply width and max-width css rules (e.g width: 120px; or 150px) but the words appears to each next to each other.

Any suggestion?

Upvotes: 1

Views: 331

Answers (7)

Danny Brady
Danny Brady

Reputation: 1935

Like so:

<h3 style="width:120px;text-align:center;text-transform:uppercase;">Sell Anywhere</h3>

Without inline styling:

<h3 class="sell-anywhere">Sell Anywhere</h3>

h3.sell-anywhere
{
   width: 120px;
   text-alignment:center;
   text-transform:uppercase;
}

Upvotes: 1

povilasp
povilasp

Reputation: 2396

One of the ways to do that:

h3{
 text-transform:uppercase;
 background:green;
 color:white;   
 float:left;
 text-align:center;
 width:100px;
}​

http://jsfiddle.net/fgu6W/

There are more than few, I guess.

Upvotes: 4

loler
loler

Reputation: 2587

See the jsfiddle and it would be great if you provide your code.

<h3 style="width:100px;text-align:center;color:white;background:black"> SELL ANYWHERE </h3>​

Upvotes: 1

Matanya
Matanya

Reputation: 6346

Use text-align:center combined with fixed width : http://jsfiddle.net/wQUyR/

h3 {
    background:blue;
    display:block;
    width:70px;
    text-align:center;
}​

Upvotes: 1

Luke
Luke

Reputation: 5076

<h3 style="text-align:center;">
SELL
<br>
ANYWHERE
</h3>

Upvotes: 1

shanabus
shanabus

Reputation: 13115

You need to provide more HTML/CSS code for a better answer, but with the information provided I would assume you may need to set your h3 tag to display: block

In this example, I did not need to set display to block, it just works: http://jsfiddle.net/vwwZs/

So maybe you have some other conflicting CSS being applied.

Hope this helps

Upvotes: 1

Doink
Doink

Reputation: 1162

<h3> SELL <br> ANYWHERE </h3>

Upvotes: 1

Related Questions