css - 仅使用 CSS 的两个 div 之间的集中 div

Question

我想知道如何集中一个 div，未知 width仅使用 CSS .

我想要这样的东西:

使用 <center>我有:

<div style="float: left">
    <p:commandButton  .../>
</div>
<center>
    <p:commandButton ..."/>
    <p:commandButton .../>
</center>
<div style="float: right">
    <p:commandButton .../>
</div>

如何只使用 css ？

注意:我不使用 margin: 0 auto只是因为集中式 div 的大小未知。

Answer 1

1) 在父 div(即您提到的元素的父级)上设置 text-align:center

2) 将 center 元素替换为 div 并在其上设置规则 display:inline-block。

fiddle

.parent {
  text-align: center;
}
.middleBtns {
  display: inline-block;
}

<div class="parent">
  <div style="float: left">
    <button type="button">
      < </button>
  </div>
  <div class="middleBtns">
    <button type="button">btn1</button>
    <button type="button">btn2</button>
  </div>
  <div style="float: right">
    <button type="button">></button>
  </div>
</div>