具有固定和动态宽度和垂直中心图像的Divs

Question

我有以下HTML

<div class="parent">
    <div class="left-colum">Some paragraphs of text</div>
    <div class="right-column"><img src="image.jpg"></div>
</div>

右列有图像的宽度，但是由于它持有不同大小的图像，所以它的宽度是未知的。我想要左列采取任何需要，但最大宽度为150 max。我也希望图片在右边的列垂直居中。

最后，它应该看起来像下面的例子，但我有一个困难的时间把这一点。我该怎么做？

​

​

编辑:我有下面的CSS，但是右边的列不是100%的高度，所以我还不能开始对图像进行垂直居中：

.parent{
    position: relative;
    height: 100%;
}
.left-colum{
    float: left;
    max-width: 150px;
}
.right-column{
    float: right;
    height: 100%;
}

Answer 1

您可以使用嵌套的flexbox --参见注释--内联。

​

body {
    margin: 0;
}
.parent {
    display: flex;
    height: 100vh; /*viewport height*/
}
.left-column {
    background: pink;
    max-width: 150px;
}
.right-column {
    background: gold;
    flex: 1; /*expand*/
    display: flex;
    justify-content: center; /*center x*/
    align-items: center; /*center y*/
}

<div class="parent">
    <div class="left-column">Some paragraphs of text</div>
    <div class="right-column">
        <img src="//dummyimage.com/100">
    </div>
</div>

​

Answer 2

在列上使用flex，并将display:flex; align-items:center; justify-content: center设置为右侧div，将max-width: 150px;设置为左侧div。也要注意浏览器的供应商前缀，以便正确使用flex属性。

.parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.left-column {
     max-width: 150px;
    display: flex;
}
.right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    display:center;
}