css - Bootstrap col-md-4 h2 不以移动设备为中心

Question

我正在使用 Rails 制作一个显示产品列表的简单购物应用程序。在移动 View 中，当产品堆叠成 1 个长列表而不是 3 行时，产品 h2 标签未居中，并且由于某种原因向右浮动。第一个 h2 标签居中很好，但其余的标签向右浮动并且居中不正确。我已经尝试了所有我能想到的与 css 相关的东西，比如

• text-align: center;
• margin-bottom: 10px;
• 文本中心
• 认为它可能会漂浮，因为它们靠得太近了？

这是我的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;
}

我的想法是，这可能是因为元素靠得太近，默认情况下是 float 的，但我试图通过边距、 float 和文本对齐来纠正这种行为，但仍然没有。对于我可能做错的任何帮助或建议，我们将不胜感激。

Answer 1

在 HTML 中您有 h2 但在样式中您尝试将 h1 置于行的中心

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

必须有

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