我有以下HTML
<div class="parent">
<div class="left-colum">Some paragraphs of text</div>
<div class="right-column"><img src="image.jpg"></div>
</div>
右列具有图像的宽度,但由于它具有不同大小的图像,因此其宽度未知。我希望左列可以采取任何需要,但最大宽度为150px。我还希望右列中的图像垂直居中。
最后它应该看起来像下面的例子,但我很难将它们放在一起。我该怎么做?
编辑:我有以下CSS,但右栏不是100%高度,所以我无法开始尝试垂直居中图像:
.parent{
position: relative;
height: 100%;
}
.left-colum{
float: left;
max-width: 150px;
}
.right-column{
float: right;
height: 100%;
}
答案 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;
}