水平居中浮动div，没有绝对位置答案

【问题标题】：Center floating div horizontally without absolute position水平居中浮动div，没有绝对位置
【发布时间】：2015-07-14 16:43:20
【问题描述】：

我无法在页面上将 div（徽标）居中。我尝试了一些方法，但它们似乎不起作用。

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

【问题讨论】：

请将您的代码放入您的问题中。
对不起。我刚刚添加了代码。谢谢
一定要浮动吗？我会将其设置为显示内联块并将其父级的文本对齐设置为居中。如果你想让它居中，就不需要让它浮动
@AbdulAhmad 嗨，它不必浮动。你能给我举个例子吗？
@crocparkisland 有这个jsfiddle.net/u0h1p1nv 看看是否适合你

标签： html css

【解决方案1】：

到锚标签，给css属性如下：

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

这就像一个魅力。

【讨论】：

【解决方案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

【讨论】：

谢谢你，这很完美。在过去的几天里，我花了几天的时间试图得到这个。非常感谢！