使用Bootstrap 3我创建了3个等宽的div(在12列布局中，每个div 4列)。 这样，即使左/右部分的宽度不同(如果它们没有溢出列的空间)，您也可以保持中心区域居中。

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

为了创建没有库的结构，我从Bootstrap CSS复制了一些规则。

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

科普彭

以下是当我用图像作为中心元素时，我必须对接受的答案做出的更改:

确保图像包含在div中(在本例中是#center)。如果不是，你将不得不设置显示为block，它似乎是相对于浮动元素之间的空间居中。 确保设置图像和它的容器的大小: #{中心 保证金:0自动; ｝ #center， #center > img { 宽度:100 px; 高度:汽车; ｝

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:中心;给予完美的中心对齐。

JSFiddle演示

如果你不想改变你的HTML结构，你也可以添加text-align: center;到包装器元素和一个display: inline-block;到居中的元素。

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

现场演示:http://jsfiddle.net/CH9K8/

Float属性实际上并不用于对齐文本。

此属性用于将元素添加到右侧、左侧或中心。

Div > Div{边框:1px纯黑色;} < html > < div > < div风格= "浮动:左”>第一个< / div > < div风格= "浮动:左”>第二< / div > < div风格= "浮动:左”>第三< / div > < div风格= "浮动:对" >第一个< / div > < div风格= "浮动:对" >第二< / div > < div风格= "浮动:对" > 3 < / div > < / div > < / html >

左输出为[First][second][Third]

右输出为[Third][Second][First]

这意味着float => left属性将把你的下一个元素添加到上一个元素的左边，right也是如此

此外，你还必须考虑父元素的宽度，如果子元素的宽度之和超过了父元素的宽度，那么下一个元素将在下一行添加

< > html < div style =教室:100% > < div style =花车:左派;教室:50%第一> < / div > < div style =花车:左派;教室:50% >第二个< / div > < div style = "漂浮:左派;第三教室:50% > < / div > < / div > < / html >

(第一次)(第二次)

(三)

所以你需要考虑所有这些方面来得到完美的结果

可能的答案，如果你想保持HTML的顺序而不使用flex。

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

码笔链接