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

Question

祝大家美好的一天， 所以我遇到了这个问题。我有标题，里面有带按钮的徽标和包装器。我使用了边距：0 自动;使用按钮居中包装器，而不是使用Flex到包装器内部的中心按钮，但是现在当我更改徽标宽度(宽度，字体大小，填充等(时，它实际上是将带有按钮的包装器移出标题的中心。如何使我的包装器始终位于标题的中心而忽略徽标的宽度？

这就是我的意思： 居中是相对于(页眉宽度(-(徽标宽度(而不仅仅是页眉宽度

这是我的小提琴：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}。但是，当然，这只有在左侧有足够的空间用于徽标时才有效。否则 #buttonWrapper 和 #logo 将叠加