垂直居中时iframe收拢的高度
垂直居中时iframe收拢的高度
提问于 2020-03-30 20:59:53
我有以下代码，它在屏幕的左上角显示iframe。我希望保持框架的相同尺寸，并将其对齐，以便iframe的中心和屏幕右侧的文本处于相同的水平。如果我使用align-items:center;，框架就会折叠。如何修复它？
<html>
<head>
<style>
.container{
display:flex;
flex-direction:row;
/*align-items: center;*/
}
.column{
flex:1 1 0px;
/*align-self: center;*/
}
iframe{
width:100%;
height:100%;
max-height: 50vh;
border-style:solid;
border-color: black;
}
</style>
</head>
<body>
<div class="container" id="interests_container">
<div class="column">
<iframe> </iframe>
</div>
<div class="column">
<h1 id="interests">Interests</h1>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
<p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
</div>
</div>
<div class="container" id="photos_container">
<div class="column">
</div>
<div class="column">
</div>
</div>
</body>
</html>注意:我已经看过Expanding iframe within Flexbox了，但这对我没有帮助。
回答 1
Stack Overflow用户
发布于 2020-03-30 22:35:10
免责声明：
这与其说是问题的解决方案，不如说是一种变通方法。但也许这对你的情况有所帮助。
解决方法
您可以保持列的整个高度伸展(通过不应用align-self: center或应用align-self: stretched)，而不是以.column为中心，而将iframe置于列的中心。
使iframe居中的一种解决方案是将此CSS应用于iframe：
position:relative;
top: 50%;
transform: translateY(-50%);下面是一个包含我刚才描述的解决方法的JSFiddle：https://jsfiddle.net/arb102tc/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60931083
复制相关文章
相似问题
腾讯云开发者
