html - css table-cell 和 vertical align middle 在 firefox 中不起作用

Question

我试图将 .onesizechart 的内容垂直居中，我在 Chrome 和 Safari 中都使用过，但在 Firefox 或 IE 中都不起作用。 .homepage-sizechart 的内容显示正常，这让我觉得我遗漏了一些非常简单的东西。有任何想法吗？

HTML/液体

<div class="medium-3 small-6 columns homepage-products left" onclick="location.href='{{ product.url }}'">   
    <div class="product-preview-image-div">
        <a href="{{ product.url | within: collection }}">
            <img src="{{ product.featured_image | product_img_url: 'grande' }}" alt="{{ product.title | escape  }}" />
        </a>                
        {% assign contains_os = false %}
        {% for variant in product.variants %}
          {% if variant.title contains 'OS' %}
            {% assign contains_os = true %}
          {% endif %}
        {% endfor %}
        {% if contains_os %}
            <div class="onesizechart">  
                {% for variant in product.variants %}
                  {% if variant.inventory_quantity == 0 %}
                    <img src="{{ 'onesize-triangle-outofstock.png' | asset_url }}"/>
                  {% else %}
                    <img src="{{ 'onesize-triangle.png' | asset_url }}"/>
                  {% endif %}
                {% endfor %}
            </div>                    
        {% else %}
            <div class="homepage-sizechart">
                <div class="sizes">
                    {{ 'size-triangle.png' | asset_url | img_tag }} 
                    {% for variant in product.variants %}
                       <span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %}  {% if variant.title contains 'OS'%}hide{% endif %}">{{ variant.title }}</span>
                    {% endfor %}
                </div>
            </div>    
        {% endif %} 
    </div>                    
</div>

CSS

.homepage-products {
    cursor: pointer;
    margin-top: 20px;
}

.homepage-sizechart {
    bottom: 0; 
    display: table-cell;
    left: 0;
    margin: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 5%;
    vertical-align: middle;
    width: 90%;
    z-index: 999;
}

.onesizechart {
    opacity: 0;
    position: absolute;
    display: table;
    width: 90%;
    z-index: 999;
    top: 5%;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.onesize {
    display: table-cell;
    vertical-align: middle;
}

.sizes {
    position: relative;
}

Answer 1

您需要将父容器设置为 display:table;，以便使用 display:table-cell 的子元素继承类似表格的属性，例如 vertical -对齐。

HTML:

<div class="container">
    <div class="panel">
        hey
    </div>
    <div class="panel">
        hey
    </div>
 </div>

CSS:

.container {
    display:table;
    height:100px;
}
.panel {
    display:table-cell;
    vertical-align:middle;
    border:1px solid red;
}

虽然您没有为上面的 .product-preview-image-div 类提供 CSS，但我猜这很可能是问题所在。

JSFiddle:http://jsfiddle.net/a4fyg/