Question

我希望将容器内容水平居中。我使用了min-height＆amp; flexbox，但在Internet Explorer中，这个解决方案并不起作用。 我无法使用简单的高度，因为：

布局响应
内容可以有不同的长度

如果内容将比容器长，那么布局将会中断（使用高度时 - 所以我必须使用最小高度......）

我准备了一个小小的演示版＆＃39; hack＆＃39;对于IE： http://jsfiddle.net/pujceaam

HTML

<div id="content" class="flex-center">
<div id="content2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit eum modi aspernatur dicta, similique. Cupiditate sapiente at facilis tempore assumenda, eaque inventore veritatis aperiam et tenetur aliquam totam quo sequi dolor illo est amet quibusdam repellat, sed eius voluptate, a repudiandae molestiae asperiores! Alias omnis aperiam nam perferendis maiores quae minus repellat similique repellendus dolor quos magnam, labore architecto quasi vitae cumque officiis adipisci exercitationem autem eius fugiat. Velit nesciunt, excepturi neque. Perspiciatis delectus, autem rerum soluta esse, nulla necessitatibus repellat ducimus ex eligendi culpa! Iusto, repellat hic aliquam sit illum tempore, adipisci modi? At doloribus, illum quod perferendis ab dolorum aut, itaque laborum, voluptates nihil ea. Quia molestias tempore repudiandae pariatur laudantium ut velit inventore, consectetur distinctio officia deserunt laborum natus sunt voluptates alias corrupti veniam tempora exercitationem, fugiat aliquam provident soluta. Provident repellat odit totam aliquam culpa distinctio voluptas expedita ipsa deleniti quasi nesciunt qui eius esse iste debitis vitae ad soluta dolorem, amet, optio aperiam ullam. Dolorem ab dolores veniam, dolore, asperiores adipisci enim maiores quas accusantium porro consectetur sapiente officia exercitationem doloremque neque aperiam hic impedit nihil inventore alias ullam voluptatem soluta earum quisquam. Obcaecati, sapiente, at. Obcaecati eius ex, delectus! Atque, ullam et vitae.</div>

的 CSS

.flex-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: rgba(125, 125, 125, .5);
    min-height: calc(100vh - 100px);
}
.va-parent {
    width: 100%;
    display: table;
}
.va-children {
    display: table-cell;
    vertical-align: middle;
}

JS

$(function () {

    //detect IE
    var isIE = (window.navigator.msPointerEnabled) || (document.all && document.addEventListener && !window.atob);

    //old method to vertical align content
    function flexible() {
        var c1 = $('#content'),
            c2 = $('#content2');

        if (c1.height() > c2.height()) {
            c1.addClass('va-parent');
            c2.addClass('va-children');
        }
    }

    //apply old method if IE
    if (isIE) flexible();

});

但我不知道这是否是一个很好的解决方案？或者也许有人有另一个想法？

编辑：在内容中可以是网格，图像，表格，列表等内容 - 不仅仅是文本：）

Answer 1

使用省略号截断字符串

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

最小高度的flexbox容器

1 个答案: