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
Post a Comment