Question

 <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中对该类进行calld并且仍然没有结果。抱歉我的英文。

Answer 1

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

.Container{
    text-align: center;
}

对于您的问题2，只需在图片上添加margin-right，值就由您决定：

img{
    margin-right: 50px
}

Answer 2

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

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

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

2 个答案: