如何在不同的瀏覽器寬度上垂直對齊動態寬度圖像旁邊的文本？

Question

我有一個問題，我一直試圖解決很長一段時間。

我有一個自適應網站，我需要在其旁邊對齊橫幅圖像和文本。橫幅圖片的最大寬度爲1170px，但任何尺寸的圖片都可以上傳，所以我們必須通過CSS強制最大寬度。

它應該看起來像這樣的事情。文本應該垂直居中，並且應該填充圖像留下的可用空間。

當我的圖像太大時會出現問題。在較小的屏幕尺寸下，我無法強制圖像根據可用的屏幕尺寸減小尺寸，因此它只會溢出屏幕。

它必須工作，直到約700px的瀏覽器寬度。之後，我們有一個斷點強制文本到一個新的行，所以我們不再有這個問題。

所以，要點：圖片的寬度是未知的，文字的數量是未知的（最多170個字符）。該網站是響應式的，最大可用空間爲1170px，但隨着瀏覽器窗口變小，它會減少。

下面是相關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

你想要的是垂直對齊包含圖像和文本的容器中的圖像。然後垂直對齊其父的形象是：如果父母的高度爲，這是不是這種情況

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 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/

我看你添加「與合作IE8" 。這使得它成爲完全不同的故事。也許這裏有一個答案：How to vertically center content of child divs inside parent div in a fluid layout，但你總是可以用IE8上的JavaScript對其進行破解。

Answer 2

我認爲最簡單的解決方案是使圖像響應與瀏覽器的大小。下面是示例fiddle

CSS

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

Answer 3

您已經在使用的表芯居中他們，所以我說你不需要彎曲在那裏了。你有表細胞要麼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內聯css，因爲它不支持媒體查詢。我用新代碼更新了上面的小提琴。