Блог

Я пытаюсь центрировать содержимое .onesizechart по вертикали, которое я использую как в Chrome, так и в Safari, но не работает ни в Firefox, ни в IE. Содержимое .homepage-sizechart отображается нормально, что заставляет меня думать, что я упускаю что-то очень простое. Есть идеи?

HTML / Liquid

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

Вам необходимо установить для вашего родительского контейнера значение 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;
}
  

Хотя вы не предоставили CSS для .product-preview-image-div класса выше, я предполагаю, что это, скорее всего, проблема в игре.

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