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;
}

我的想法可能就是这种情况发生了，因为元素太靠近并且默认情况下正在浮动，但我试图通过margin，float和text-align来纠正这种行为，但仍然没有。任何有关我可能做错的帮助或建议都将不胜感激。

Answer 1

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

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

必须有

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

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

1 个答案: