如何在 HTML 中将幻灯片移动到页面中心

How to move slideshow to the center of page in HTML

本文关键字：移动 HTML 幻灯片      更新时间：2023-09-26
 <html>
    <head>
        <meta charset = "utf-8/">
        <title> My Student Life </title>  
        <link rel="stylesheet" href="Pan.css"/>  <!--Links to the CSS -->

    <script type = "text/javascript">  // JavaScript code 
             var slideimages = new Array()      //SlideShow process begins
             imgAlign = "center"
             slideimages[0] = new Image() // create new instance of image object
             slideimages[0].src = "Welcome.jpg" // set image src property to 
             slideimages[1] = new Image()
             slideimages[1].src = "Code.jpg"  //Image source
             slideimages[2] = new Image()
              slideimages[2].src = "books.jpg"

        </script>  
        </head>
        <body class ="Container" Background = "Background.jpg">   <!-- Background Images-->
            <div class="headerMenu">   <!-- Div class for menus -->
                        <h1> My Student Life </h1>

                        <div id="menu">  <!-- created Menus-->
            <ul>
                <a href="WelcomePage.html"/> Welcome </a>
                <a href=""/></a>                              <!--Menu links-->
                <a href="Menu.html"/> Menu </a>      
                <a href=""/> </a>
            </ul>

            </div>  


                   <header>
                         <h2 color = "white"> Welcome to my Student Life </h2> 
                  </header>  
    <img src = "Welcome.jpg" width = "500" height ="300" id = "slide" >  <!--Image --> 

    <script type="text/javascript">
     var step=0       //starts 
    function slideit(){   //function called slideit
     if (!document.images)
      return
     document.getElementById('slide').src = slideimages[step].src  //Gets image by ID and follows the sliding process
     if (step<2)
      step++
     else
      step=0
     //call function "slideit()" every 2.5 seconds
     setTimeout("slideit()",2500)   
    }
    slideit()  //Enable the function to perform
    </script>



            </body>

    </html>
我

正在为我的一门大学课程创建一个项目，我使用 JS 创建了一个幻灯片，它完美运行，唯一的问题是图像的位置一直到屏幕左侧。我尝试在 css 中向左填充，但仍然不起作用，我在div 类中创建了它，并在 CSS 中调用了该类，但仍然没有结果。对不起我的英语。

在 Pan 中添加以下内容.css ：

.Container{
    text-align: center;
}

对于您的问题 2，只需在图像中添加右边距，值取决于您：

img{
    margin-right: 50px
}

尝试将以下样式添加到您的 img 标签中：

<img src = "Welcome.jpg" width = "500" height ="300" id = "slide" style="margin: auto;" >
相关文章：