Центр div с фоном, внутри верхней панели с шириной 100%

0

Как получить логотип, расположенный внутри верхнего бара, который имеет ширину 100%? Я чувствую себя полным идиотом. margin: 0px auto aint work..

HTML

<div id="topbar-fullwidth">
        <div class="tb menu" id="unfoldMenu"></div>
        <div class="tb logo"></div>
</div>

CSS:

#topbar-fullwidth {
    width: 100%;
    height: 42px;
    background: #000;
    border-bottom: 2px solid #000;
    position: relative;
    overflow: hidden;
}

.tb.menu {
    width: 44px;
    height: 44px;
    float: left;
    background: url('../images/icons/[email protected]') no-repeat;
    background-size: 22px;
    background-position: 10px 13px;
}

.tb.logo {
    width: 140px;
    height: 44px;
    float: left;
    margin: 0px auto;
    display: block;
    background: url('../images/[email protected]') no-repeat;
    background-size: 125px;
    background-position: 10px;  
}

Спасибо, lol.

Теги:

2 ответа

3
Лучший ответ

Вы не можете использовать margin:0 auto; на плавающий элемент. Поэтому вам нужно удалить float:left; на логотипе.

FIDDLE

  • 1
    Боже мой, я чувствую себя таким тупым Имфао. Спасибо, приятель, ценю это. Я приму ваш ответ в течение 10 минут. Это не позволит мне прямо сейчас.
  • 0
    @ user3512502 Я ничего не скажу, потому что это часто случается со мной;)
0

Прежде всего вы не должны использовать float: с элементом, у которого есть margin:0 auto set.

Вот пример, я надеюсь, что это поможет, изменил фон: с фоном-цветом, чтобы сделать видимыми изменения. Я также удалил float: left.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню