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

Question

大家好，所以我遇到了这个问题。我有 header，里面有徽标和带按钮的包装纸。我用过 margin: 0 auto;使用按钮居中包装器，而不是使用 flex 将按钮居中放置在包装器内，但现在当我更改徽标宽度（宽度，font-size，填充等）时，它实际上是将带有按钮的包装器移出 [=21= 的中心].我怎样才能使我的包装纸始终位于 header 的中心并忽略徽标的宽度？

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

这是我的 fiddle: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;}

Answer 1

你可以试试#logo {position: absolute}。但是，当然，这只有在徽标左侧有足够的 space 时才有效。否则#buttonWrapper 和#logo 将覆盖

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

Floated element width affects centering of other

css

margin

css-float

centering

flexbox