中心兩個元素（基於容器和第二個元素的高度IMG）

Question

我正在創建Wordpress模板的過程中，某些時候用戶可以使用一張圖片在網站上添加列表。

• 在IMG的高度應該是比例一樣高的名單
• 所以IMG不能有像{對象的位置：蓋}聲明
• 的IMG和列表應居中

我一直在爲此而努力，因爲天數。

• 我試過機智^ h IMG絕對位置和高度的100％，但隨後的容器不正確的中心，因爲在IMG的缺失寬度
• 我試着用HTML表格的
• ，基本上附帶在我心中的一切

我搜索在互聯網上，但沒有解決想出了..

也許我必須設法解決這個問題的JavaScript ..

my problem in a pic

Answer 1

你可以使用顯示：表 css的性質來解決你的問題。這裏是demo

CSS

.parent{ 
    display:table; /* make it table*/ 
    width:100%; 
    table-layout:fixed; 
} 
.parent > *{ 
    display:table-cell; /* make it table-cell*/ 
    height:100%;/* take max-height from both childs*/ 
    width:50%; 
    border:1px solid #000; 
    vertical-align: top; 
} 
.parent > div img{ 
    max-width:100%; 
    height:100%; 
} 
.parent ul{ 
    padding:0; 
    } 
.parent li{ 
    padding:10px; 
    color:#000; 
} 

HTML

<div class="parent"> 
    <div><img src="https://dummyimage.com/600x400/000/fff" alt="Image"></div> 
    <ul> 
    <li>List 1</li> 
    <li>List 2</li> 
    <li>List 5</li> 
    <li>List 1</li> 
    <li>List 2</li> 
    <li>List 5</li> 
    <li>List 6</li> 
    <li>List 7</li> 
    <li>List 8</li> 
    <li>List 9</li> 
    <li>List 10</li> 
    <li>List 11</li> 
    </ul> 
</div>