具有固定和动态宽度以及垂直居中图像的Div

时间:2015-10-12 16:38:13

标签: html css

我有以下HTML

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

右列具有图像的宽度,但由于它具有不同大小的图像,因此其宽度未知。我希望左列可以采取任何需要,但最大宽度为150px。我还希望右列中的图像垂直居中。

最后它应该看起来像下面的例子,但我很难将它们放在一起。我该怎么做?

enter image description here

编辑:我有以下CSS,但右栏不是100%高度,所以我无法开始尝试垂直居中图像:

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

2 个答案:

答案 0 :(得分:2)

您可以使用嵌套的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>

答案 1 :(得分:1)

在列上使用弹性显示,并在右侧div上设置display:flex; align-items:center; justify-content: center,在左侧div上设置max-width: 150px;。还要注意浏览器的供应商前缀,以便正确使用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;
}