Блог

Я пытаюсь центрировать содержимое .onesizechart по вертикали, которое у меня работает как в Chrome, так и в Safari, но не работает ни в Firefox, ни в IE. В Chrome и Safari содержимое отображается так при наведении курсора мыши, но в Firefox и IE содержимое отображается так при наведении курсора мыши. Живой сайт здесь не совсем уверен, что является причиной этого.

HTML / Liquid

 <div class="medium-3 small-6 columns homepage-products left" onclick="location.href='{{ product.url }}'">   
    <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>
  

CSS

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

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

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

.sizes {
    position: relative;
}
  

Попробуйте изменить это display: inline-block; top: 30%;

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