微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

页眉和页脚之间的视频

如何解决页眉和页脚之间的视频

我需要一些帮助来处理我凌乱的代码(请原谅我的母语中有很多文本)。我需要在网站的页眉和页脚之间安装 IFRAME,所以它在每个显示器上看起来都一样(分辨率)。 谢谢!

body {
margin: 0;
background-image: linear-gradient(to right,#292c33,#a0b2d0,#dee9f6,#292c33);
}
p{
    color: #272727;
    text-align: left;
    display: block;
    font-family: 'Montserrat',sans-serif;
    padding-left: 14px;
    font-size: 12px;
    text-decoration: none;
    
    //  nadefinování písma na stránce   
}


.nav{
    background-color: #eaeaea;
    overflow: hidden;
  
}

.nav a{
    float: left;
    display: block;
    color: #272727;         //  barva fontu
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 100%;
    border-bottom: 3px solid transparent;
    font-family: 'Montserrat',sans-serif;
    height: 30px;
}
.nav a:hover{
    border-bottom: 3px solid #310a0b;
}
.nav a.active{
    border-bottom: 3px solid #b50c0f;
}



.fotka{
    display: block;
    float: right;
    width: 5%;
    height: 5%;
    margin: 12px;                    
    }
footer{
    padding: 1px;
    background-color: #eaeaea;
    color: #272727;
    font-family: 'Montserrat',sans-serif;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    width: 100%;
 
}

.zvideo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0%;
   
    
  
   
    
                                                                          
}
<!DOCTYPE html>
<html lang="cs">
<head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    
    <link rel='icon' href='favicon.ico?' type='image/x-icon'/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
            
    <title>Hlavní stránka</title> 
</head>
    <body>
        <div class="nav">
            <a class="active" href="index.html">Domů</a>
            <a href="Druha.html">Zaklínač</a>          
            <a href="Treti.html">Hry</a>
            <a href="Ctvrta.html">Knížky</a>

            <img class="fotka" alt="logo stránky" src="logo.png">

        </div>
<!--NÁSLEDUJE DIV IFRAMU-->
       <div class="zvideo">
            <iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
       </div>
       
       <footer>
           <p>Autor: Jan Michalisko</p>
           <p>Můj email: hachikolp@gmail.com</p>       <!--mailto: mi přišel velmi barbarský,takže jsem tam nechal jenom paragraf-->
       </footer>

   </body>
</html>

我希望你能识别出页脚、头部等是什么,我真的不擅长编码,哈哈。感谢您的帮助!

解决方法

根据评论,您只是想 center 一个 iframeI 中的 iframe 代表 inline。因此,<iframe> 标记的正确名称是:inline frame。顾名思义,它不是block level element而是inline element。因此,默认情况下不能使用 margin: 0 auto; 居中。因此,您需要先添加 display: block;,以便将 iframe 更改为 block level element

iframe {
  display: block;
  margin: 0 auto;
  background-color: blue;
}
<iframe src="">Just a Test</iframe>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。