Question

我无法在页面上居中显示div（徽标）。我尝试过一些东西，但它们似乎没有用。

通过将text-align设置为容器的中心并使用绝对位置grid_4（右：0;），我能够将徽标置于页面中心。但是，当最小化浏览器时，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

对于锚标记，按如下方式给出css属性：

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

这就像一个魅力。

Answer 2

您可以添加徽标中心：

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

并修复您的响应

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

它应该可行我已经测试过了。

注意：尝试在您的徽标容器中添加一些ID或classe，而不是选择.container > .grid_8 > a使用您的#your_logo_id

中心浮动div水平没有绝对位置

2 个答案: