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-align。

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/

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

1 个答案: