引导-md-4 h2不以移动为中心

Question

我使用rails制作了一个简单的购物应用程序，它显示了一个产品列表。在移动视图中，当产品堆栈为1长列表而不是3行时，产品h2标记没有对中，并且由于某种原因向右浮动。第一个h2标记的中心很好，但其余的则向右浮动，并且没有正确地居中。我已经尝试了与css相关的所有我能想到的东西

• text-align: center;
• margin-bottom: 10px;
• text-center
• 想因为它离我们太近而漂浮吗？

这是我的html和css。

<div class="row text-center">
        <% @products.each do |product| %>
          <div class="product col-md-4 text-center">
           <h2><%= link_to product.name, product_path(product) %></h2>
            <%= link_to image_tag(product.image_file_name, product_path(product), :class => 'img-responsive' %>
            <div class="product-info">
                <div class="product-info-left"><%=product.descrip %></div>
                <div class="product-info-right">$<%=product.price %></div>
            </div>
          </div>
        <% end %>
    </div>

Css

@media(max-width:768px) {
    .product-page, .product-show {
        padding-top: 2px;
    }

    .product-info-right, .product-info-left {
        margin-bottom: 10 !important;
    }

    .product > h2{
        text-align: center !important;
    }
}

    .product-info-left {
    float: left;
    width: 50%;
    font-family: 'Pacifico', cursive; 
    font-size: 15px;
}

.product-info-right {
    float: right;
    width: 50%;
    font-family: 'Oswald', sans-serif;
}

.product img {
    height: 200px !important;
    width: 250px !important;
}

.product h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
}

.product > h2 > a {
    color: black !important;
    border-bottom: 1px solid #1e9b69;
}

我的想法是，这可能是因为这些元素太近了，在默认情况下被正确浮动，但是我试图通过边距、浮动和文本对齐来纠正这种行为，但仍然什么也没有。任何帮助或建议，我可能做错了，将不胜感激。

Answer 1

在HTML中，您有h2，但是在样式中，您尝试将h1放在线上。

.product > h1{
    text-align: center !important;
}

一定有

.product > h2 {
    text-align: center !important;
}