中心两个元素（基于容器和第二个元素的高度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>