在靜態容器中動態加載文本後的標題之後的垂直中心元素

Question

這讓我發瘋，我認爲現在甚至沒有可能，但我想在放棄之前諮詢互聯網上帝。

的我想要什麼

可視化表示：

我希望文本在左上角的容器中，並將圖像對準對準自己在空間的中心，這是剩下的（if）文後換行。

請參閱demo

我使用flexbox和margin: 0 auto得到h2元素上我想要的中心，並position: absolute如果圖像是漫長的，但看起來可怕的高大形象工程的罰款。

是否有一些flexbox魔術可以用來考慮動態加載的h2元素的高度並使圖像居中在剩餘的可用空間內？

約束：

• 的父容器必須是200像素由200像素。
• 圖像不能變形（拉伸）。

Answer 1

我能夠通過組合@克勞迪奧的table想法找到自己的解決方案和一些position absolute魔術。

這裏是解決方案的演示既高又寬的圖像： DEMO

HTML：

<div class="main-box"> 
    <table> 
    <tr> 
     <td class="box-title"> 
      <h2> 
       My title here. :) add some more text 
      </h2> 
     </td> 
    </tr> 
    <tr> 
     <td class="box-img"> 
      <img src="//i.imgur.com/NOzWHFF.png" alt="Google"> 
     </td> 
    </tr> 
    </table> 
</div> 
<div class="main-box"> 
    <table> 
    <tr> 
     <td class="box-title"> 
      <h2> 
       My title here. :) add some more text 
      </h2> 
     </td> 
    </tr> 
    <tr> 
     <td class="box-img"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="Google"> 
     </td> 
    </tr> 
    </table> 
</div> 

CSS：

*{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.main-box{ 
    width: 200px; 
    height: 200px; 
    border: 2px solid #000; 
    background-color: #FFF; 
    position: relative; 
} 
.main-box table{ 
    width: 100%; 
    height: 100%; 
    border-spacing:0; 
} 
.main-box .box-title{ 
    background-color: rgba(0, 0, 0, 0.1); 
    height: 1px; 
} 
.main-box .box-title h2{ 
    margin: 0; 
    padding: 5px; 
    font-family: Helvetica, Arial, sans-serif; 
} 
.main-box .box-img{ 
    text-align: center; 
    vertical-align: middle; 
    padding: 5px; 
    position: relative; 
} 
.main-box .box-img img{ 
    max-width: 100%; 
    max-height: 100%; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

Answer 2

這不是不可能的，沒有什麼是不可能的。 :)

所以，我正在努力做一些工作，花了很多時間思考和測試後......解決方案！不幸的是，正在使用表（我很抱歉，但它只能用HTML和CSS來完成）。

該結構的基礎很簡單。我們有一個主要的div與我們想要的尺寸（200px X 200px）。它裏面，我們有兩條線table（一到我們的標題，以及其他我們美麗的img）

後，我們樣式結構，消除border-spacing ...去除h2margin之類的東西。我們需要（這裏是訣竅）將height: 1px;應用到表格的第一行（標題的行）。

爲什麼height: 1px;？

那麼，table元素應用其內容後的大小。我們應用height: 1px;，該行不會得到字面與1px的高度，這意味着該行將盡可能少的高度尊重內容。這樣做後，另一行（圖像的行）將獲得所有的剩餘空間，並且在它僅應用vertical-align: middle;和text-align: center;以使圖像居中。

所有的解釋之後...代碼：

https://jsfiddle.net/u61y62r8/

我希望它可以幫助你。:)

Answer 3

這應該做的伎倆。

<div class="container"> 
    <div class="inner"> 
    <h2>This is a title</h2> 
    </div> 

    <div class="inner-2"> 
    <img src="https://thesingleplayermode.files.wordpress.com/2013/05/pokemon-banner.jpg"> 
    </div> 
</div> 

CSS：

.inner { 
    width: 100%; 
    height: 50px; 
} 

.inner-2 { 
    height: calc(100% - 50px); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.img { 
    max-width: 100%; 
    max-height: 100%; 
}