CODEWITHSUNDEEP
htmlcss
Jake Schievink
Jake Schievink

Reputation: 409

Getting text to display to the left and right of a text-align: center

Alright so I have 

    <div id='1'></div>
    <div id='2'></div>
    <div id='3'></div>

Only one word will go into each div. I want the width of each div to be auto

and I want to word from #2 to be in the middle of the screen using text-align: center; with the word in #1 being displayed directly to the left of #2 and the #3 directly to the right of #2.

I have been trying different css for a while, but to no effect.

Hoping someone has a simple answer.

Upvotes: 1

Views: 235

Answers (4)

thgaskell
thgaskell

Reputation: 13236

text-align: center only applies to inline elements.

jsfiddle

HTML

<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>

CSS

body { text-align: center; }

div { display: inline-block; }

Upvotes: 1

Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

I suggest you to use <span> tag instead of using div tag,because div have a property of taking width 100%.

Or else if you want to use div tag then use in the following manor

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<style>
div{
float:left;
width:33.3%;
}
</style>

Upvotes: 0

invot
invot

Reputation: 535

Simply float all the divs to the left. They will display in order.

<style>
  .my-dvis {
    float:left;
    width:33.33%;
    margin:0;
    padding:0;
    border:none;
  }
</style>

<div class="my-divs"></div>

<div class="my-divs"></div>

<div class="my-divs"></div>

Upvotes: 2

VtoCorleone
VtoCorleone

Reputation: 17203

Have you tried floating id=1 to the left and floating id=3 to the right?

Upvotes: 0

Related Questions