html - Center floating div horizontally without absolute position -


i'm having trouble centering div (logo) on page. i've tried few things don't seem working.

i able center logo on page setting text-align center container , using absolute position grid_4 (right: 0;). when minimizing browser, 2 divs overlap.

    <!-- header --> <header>    <div class="container">       <div class="grid_8 center-touch full-width wow fadeindown animated">        <a href="/">                                {% if settings.use_logo %}         <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name | escape }}" class="logo" />         {% else %}         <h1 class="logo">{{ shop.name | escape }}</h1>         {% endif %}       </a>      </div>      <div class="grid_4 right m-t-35 m-b-10 hide-touch wow fadeindown animated">        <div class="cart">          <span class="total">{{ cart.total_price | money_with_currency }}</span>        </div>        <a href="/cart" class="cart-btn" title="your cart"><span class="count">{{ cart.item_count }}</span></a>       </div>    </div>       <div class="clear"></div>    {% include 'navigation' %}  </header> 

you can center logo adding :

.container > .grid_8 > {     float: right; } 

and fix responsive

@media , (max-width: 1024px) {     .container > .grid_8 > {         float: none;     } } 

it should work have tested it.

note: try add id or classe logo container , instead of selecting .container > .grid_8 > a use #your_logo_id


Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - How to Hide Date Menu from Datepicker in yii2 -