html - 没有绝对位置的水平居中 float div

Question

我无法将页面上的 div( Logo )居中。我已经尝试了一些方法，但它们似乎没有用。

通过将容器的文本对齐设置为中心并将绝对位置设置为 grid_4(右:0；)，我能够使 Logo 在页面上居中。但是，当最小化浏览器时，2 个 div 会重叠。

    <!-- 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>

Answer 1

给 anchor 标签，给css属性如下:

.grid_8 > a {
display: block;
width: 100%;
text-align: center;}
.grid_8 > h1 {
display: inline-block;}

这就像一个魅力。