浮动元素宽度影响其他元素的居中答案

【问题标题】：Floated element width affects centering of other浮动元素宽度影响其他元素的居中
【发布时间】：2019-03-16 07:23:07
【问题描述】：

祝大家今天好，所以我遇到了这个问题。我有标题，里面有徽标和带按钮的包装。我使用了 margin: 0 auto;用按钮居中包装器，而不是使用 flex 来使包装器内的按钮居中，但是现在当我更改徽标宽度（宽度、字体大小、填充等）时，它实际上是在将带有按钮的包装器移出标题中心。如何让我的包装器始终位于标题中心并忽略徽标的宽度？

这就是我的意思： Centering is relative to (width of header)-(width of logo) not just width of header

这是我的小提琴：https://jsfiddle.net/zgf0xajq/1/

body,html{margin:0;padding:0;}
#header{width:100%;height:50px;background-color:blue;}
#logo{float:left;padding:5px 4px;font-size:200%;width:400px;}
#buttonWrapper{background-color:grey;margin:0 auto;width:300px;height:100%;
      display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
      display: -ms-flexbox;  /* TWEENER - IE 10 */
      display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
      display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
      justify-content: center;
      align-items: center;}
.tButton{float:left;padding:0 5px;}

【问题讨论】：

标签： css flexbox css-float margin centering

【解决方案1】：

你可以试试#logo {position: absolute}。但当然，这只有在左侧有足够的空间放置徽标时才有效。否则#buttonWrapper 和#logo 将重叠

【讨论】：

谢谢，这正是我所需要的。