Ширина плавающего элемента влияет на центрирование другого - PullRequest
0 голосов
/ 11 октября 2018

Добрый день всем вам, так что у меня проблема.У меня есть заголовок и внутри есть логотип и обертка с кнопкой.Я использовал маржу: 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;}

1 Ответ

0 голосов
/ 11 октября 2018

вы можете попробовать #logo {position: absolute}.Но, конечно, это будет работать, только если на левой стороне достаточно места для логотипа.В противном случае #buttonWrapper и #logo будут перекрывать

...