Question

如何获取按钮id = button1与按钮id = button2匹配？我试图在页面中间水平获取button1。我需要这个才能在chrome上工作。

<div id='todoCnts' style="text-align:center">
    <span id='checkCnt' style="float:left">Item Count :</span>
    <button id='button1' >New TODO</button>
    <span id='uncheckCnt' style="float:right">Item Count for the win:</span>
    <br>
    <button id='button2' >New TODO</button>
 </div>

Answer 1

您可以尝试使用flexbox。在小屏幕上它也会响应。

#todoCnts {
  display:flex;
  flex-wrap:wrap;
}
#todoCnts > span {
  flex:1;
}
#uncheckCnt {
 text-align:right;
}
#todoCnts > div {
  flex-basis:100%;
  text-align:center;
}

<div id='todoCnts'>
    <span id='checkCnt' >Item Count :</span>
    <button id='button1' >New TODO</button>
    <span id='uncheckCnt' >Item Count for the win:</span>
    <div><button id='button2' >New TODO</button></div>
</div>

Answer 2

您需要从流程中移出居中按钮，以便它忽略浮点数。

编辑：为了让Chrome浏览器受益，我们需要稍微更改标记。

或者您可以使用Temani的“转换”解决方案。查看评论。

#button1wrapper {
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
}

<div id='todoCnts' style="text-align:center">
    <span id='checkCnt' style="float:left">Item Count :</span>
    <div id='button1wrapper'><button id='button1' >New TODO</button></div>
    <span id='uncheckCnt' style="float:right">Item Count for the win:</span>
    <br>
    <button id='button2' >New TODO</button>
 </div>

Answer 3

尝试使用flexbox，正是为此而设计的！将id =“ todoCnts”样式设置为：

display: flex;
align-items: center;
justify-content: center;

然后孩子们将div设为“保证金：自动”

跨度宽度不同时如何居中按钮

3 个答案: