更新

Question

我有一个问题，我一直试图解决很长一段时间。

我有一个自适应网站，我需要在其中对齐横幅图片和旁边的文字。横幅图像的最大宽度为1170像素，但可以上传任何尺寸的图像，因此我们必须通过CSS强制最大宽度。

看起来应该是这样的。文本应垂直居中，并应填充图像留下的可用空间。

当我的图像太大时会出现问题。在较小的屏幕尺寸中，我无法强制图像根据可用的屏幕尺寸减小图像尺寸，因此它只会溢出屏幕。

它必须工作到大约700px浏览器宽度。之后我们有一个断点，强制文本到一个新行，所以我们不再有这个问题了。

所以，主要观点：图像的宽度未知，文本量未知（最多170个字符）。该网站响应迅速，最大可用空间为1170像素，但随着浏览器窗口缩小，它会减少。

以下是相关的SASS代码：

.logo img {
    max-width: 1170px;
}
.logo, .logo-text {
    text-align: center;
}
.logo-text {
    font-weight: 700;
}
@media all and (min-width: breakpoint(4)) {
    .logo {
        @include flex(none);
        @include ie8 {
            width: 1px;
        }
        @include ie9 {
            width: 1px;
        }
    }
    .logo, .logo-text {
        text-align: left;
        @include ie8 {
            display: table-cell;
            vertical-align: middle;
        }
        @include ie9 {
            display: table-cell;
            vertical-align: middle;
        }
        margin-bottom: 0;
    }    
    .logo-wrapper {
        @include ie8 {
            display: table;
        }
        @include ie9 {
            display: table;
        }
        @include display(flex);
        @include flex-direction(row);
        @include flex-wrap(nowrap);
        @include align-items(center);
    } 
    .logo-text {
        -ms-flex: 0 1 auto; //IE10 hack to wrap the text
    }
}

以下是相关的HTML代码：

<div class="logo-wrapper">
                <div class="logo">
                    <img src="https://xy.com/.png" alt="Logo">
                </div>
                <p class="logo-text" style="color: #FFF;">

                    This is a test This is a test This is a test This is aThis is a test This is a test This is a test This is a

                </p>

            </div>

它必须在 IE8 +和其他主流浏览器中运行！

当图像的最大宽度为230px时，此代码有效。但现在它必须增加到1170px。

Answer 1

你已经在使用table-cell来居中，所以我说你也不需要在那里使用flex。您对表格单元格http://caniuse.com/#feat=css-table

的支持没有问题

这应该是使其在功能上有效的所有css：

@media all and (min-width: 500px) {
    .logo-wrapper {
        display: table;
    }

    .logo-text, .logo {
        display: table-cell;
        vertical-align: middle;
    }

    .logo {
        padding-right: 25px;
        max-width: 1170px;
    }
}

此外，可能更容易确保图像是块并且最大宽度为100％并让它的父级指定宽度

.logo img {
    max-width: 100%;
    display: block;
}

这是一个JS小提琴：https://jsfiddle.net/2crhLc9a/13/

更新

要解决有关Firefox和IE8的评论中提到的不遵守最大宽度的问题，我使用了此帖子中的解决方案：http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

基本上，还添加了以下.logo-wrapper：

.logo-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}

我也为IE8添加了一些hacky inline css，因为它不支持媒体查询。我用新代码更新了上面的小提琴。

Answer 2

您想要的是在包含图像和文本的容器中垂直对齐图像。然后在其父级中垂直对齐图像：

position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

如果设置了父级的高度，元素可能是相对的，情况并非如此。

根据我的经验，它适用于许多情况和所有主流浏览器（甚至是IE9 + ）。

如果您使用SCSS，您甚至可能希望实现此mixin：

@mixin v-align($position: absolute){
    position: $position;  top: 50%;  
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE */
    -moz-transform:translateY(-50%); /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
    -o-transform:translateY(-50%);
}

这个小提琴的位置是绝对的：

https://jsfiddle.net/fhzo162p/1/

我看到你添加了＃34;必须使用IE8＆＃34;。这使它成为一个完全不同的故事。也许这里有一个答案：How to vertically center content of child divs inside parent div in a fluid layout但是你总是可以用IE浏览器来解决这个问题。

Answer 3

我认为最简单的解决方案是使图像也能响应浏览器的大小。以下是示例fiddle

<强> CSS

img {
    width: 80%; // you change it depends on what you want.
}

如何在不同的浏览器宽度上垂直对齐动态宽度图像旁边的文本？

3 个答案:

更新