时间戳

首页 > 解决方案 > 垂直对齐中心时 iframe 折叠的高度

html - 垂直对齐中心时 iframe 折叠的高度

问题描述

我有以下代码显示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>

注意：我已经在 Flexbox 中看到了 Expanding iframe，但这对我没有帮助。

标签： htmlcssiframeflexbox

解决方案

免责声明：

这是一种解决方法，而不是解决您的问题的方法。但也许它对您的情况有所帮助。

解决方法

代替 flex-centering .column，您可以保持列拉伸整个高度（通过不应用align-self: center或通过应用align-self: stretched）并将 iframe 居中在列内。

将 iframe 居中的一种解决方案是将此 CSS 应用于 iframe：

position:relative;
top: 50%;
transform: translateY(-50%);


这是我刚刚描述的解决方法的 JSFiddle： https ://jsfiddle.net/arb102tc/1/

推荐阅读