html - 标题后垂直居中元素，动态加载的文本全部在静态容器中

Question

这让我发疯，我认为目前甚至不可能，但我想在放弃之前咨询互联网大神。

我想要的视觉表示:

我希望文本与容器的左上角对齐，并且图像与文本换行后(如果)剩余的空间中心对齐。

请参阅demo

我正在使用 flexbox 和 margin: 0 auto 来获得我想要的居中，并在 上使用 position: absolute如果图像很长，h2 元素工作正常，但对于高图像看起来很糟糕。

我可以使用一些 flexbox 魔法来考虑动态加载的 h2 元素的高度并使图像在其余可用空间内居中吗？

约束:

• 父容器必须为 200 x 200 像素。
• 图片不能扭曲(拉伸(stretch))。

Answer 1

通过结合@Claudio 的 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;
}