css表格单元格和垂直对齐中间在Firefox中不起作用

Posted 2023-03-06

【中文标题】css表格单元格和垂直对齐中间在Firefox中不起作用

【英文标题】：css table-cell and vertical align middle not working in firefox

【发布时间】：2014-08-17 21:20:43

【问题描述】：

我正在尝试将 .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' "  />
        </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;

【问题讨论】：

父容器 .product-preview-image-div 需要设置为 display:table，vertical-align:middle; 才能工作。

【参考方案1】：

您需要为使用display:table-cell 的子元素将父容器设置为display:table;，以继承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/

【讨论】：

我没有为 .product-preview-image-div 提供 CSS，因为该 div 没有样式。但是，添加 display:table 会破坏一切。

@EricFilkins 您需要重新构建 CSS / HTML 以便 .product-preview-image-div 使用 display:table;否则您可能必须使用不同的解决方案来垂直对齐 .onesizechart 的内容。这是一篇关于垂直居中的好文章：css-tricks.com/centering-in-the-unknown