两个div之间的集中div只使用CSS

Question

我想知道我如何使用width对未知CSS的一个div进行集中化。

我想要的东西：

使用<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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这似乎在这里得到了很多，请看How to horizontally center a <div> in another <div>?

基本上你想要居中的内部元素需要一个内联的显示类型：block;并且包装此元素的容器要在其中居中设置text-align：center;

的属性