将文本显示在text-align：center的左侧和右侧

Question

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.

Answer 1

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>

Answer 2

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

Answer 3

您是否尝试向右浮动id = 1并向右浮动id = 3？

Answer 4

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>