css垂直對齊不能正常工作

我正在使用css和bootstrap來開發一個網站，並使用verticle-align：middle;是不是它應該如何工作，但在研究這個主題時，我發現了垂直對齊項目的解決方案，但它可能無法在舊瀏覽器中工作。css垂直對齊不能正常工作

這是我發現，工作，他們是在列居中的圖像。

.logo-container{ 
    height: 100%; 
    display: flex; 
    align-items : center; 
    .logo{ 

    } 
} 
}

這是我嘗試使用，但不能讓它開始工作。

section#providers{ 
.logo-container{ 
    height: 100%; 
    display: table; 
    .logo{ 
     width: 100%; 
     display: table-cell; 
     vertical-align: middle !important; 
    } 
} 
}

這是HTML

<section id="providers"> 
 
\t <div class="container"> 
 
\t \t <div class="row" id="logos"> 
 

 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/uh.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/test1.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
</div> 
 
</section>

從我研究了所有你需要做的是設置父顯示爲一個表，然後將子顯示爲一個表格單元格，並將垂直algin設置爲中間。我從照片中遺漏了什麼？

來源

2017-10-19 John

您的代碼似乎只是將圖像堆疊在彼此之上：https：//jsfiddle.net/vo09rx04/。你究竟想要達到什麼樣的目標，以及以什麼樣的方式實現你期望的目標？另外，你使用'SCSS'嗎？你能否確保你提供[**最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）。有關詳細信息，請參閱有關[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask）的幫助文章，並參加該網站的[**遊覽**]（http://stackoverflow.com/tour）:) –

嘗試製作6列所有帶有徽標的行。徽標並不完全相同。我可以使用引導4阿爾法。這可能就是爲什麼它不在我的屏幕上渲染。 – John

[如何垂直對齊div中的圖像？]（https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div） – AjitZero

父div缺少位置：相對;

section#providers{ 
.logo-container{ 
    position: relative; 
    height: 100%; 
    //display: flex; 
    //align-items : center; 
    display: table; 
    .logo{ 
     width: 100%; 
     display: table-cell; 
     vertical-align: middle !important; 
    } 
} 
}

來源

2017-10-19 21:54:13 John

css垂直對齊不能正常工作

回答

相關問題