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