Question

我将YouTube视频嵌入到 iframe 中，我将其放入div中。我现在处理的问题是我可以水平对齐（在中间）文本而不是 iframe 。

这是我用来做这个的代码：

HTML

if (saveFileDialog1

CSS

<div id="box-logo">
    <img src="Content/Media/red_package.png" />
    <span>Quem somos?</span>

    <iframe src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1"
            frameborder="0"
            allowfullscreen></iframe>
</div>

我一直在搜索多个提示，但我无法找到可以解决问题的提示。
我很乐意听取您的建议，以便试用它们。

提前致谢，
Granvic

Answer 1

您必须将#box-logo iframe的保证金设置为0 auto。

这是因为您将display属性设置为block的元素，因此需要整行。当您将width设置为确定的px数量时，该行中会有一些可用空间。设置margin: 0 auto表示自由空间必须平均分配到div的每一边。

如果您将iframe display属性设置为inline或inline-block，则无效。要使div居中，在这种情况下，您应该将text-align: center应用于#box-logo

这里有一个小提琴： https://jsfiddle.net/g2s384L2/

Answer 2

您还可以使用此代码

使iframe响应

＆＃13;

/* Flexible iFrame */
 
.flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe width="420" height="315" src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

Answer 3

你只需要用

更新你的CSS

iframe {display:inline-block;}
span {display:block;}

https://jsfiddle.net/wpnjk2rf/

Answer 4

你可以像这样设置

<iframe src="https://www.youtube.com/embed/uz0d_oeRfaU?autoplay=1" frameborder="0" allowfullscreen="" style="width: 600px;height: 300px;
display: inline-block;"></iframe>

如何使用CSS水平对齐iframe（在屏幕中央）？

4 个答案: