Question

我绝不是网络开发者，我更关注基础设施方面的事情。无论如何，我在XServe G4上构建了一个带有AMP堆栈的FreeBSD服务器，并希望修改只打印“It Works！”的通用登录页面。当我遇到CSS问题时，在纯白色的屏幕上看到更有趣的东西。

这是页面 - 它的工作方式与Mac，Win10上的Chrome，Opera，Safari完全相同（我没有在Win10上查看Safari）

在Microsoft Edge上，我明白了：

我需要在CSS中做些什么才能正确定位该元素？

页面的代码在

下面

<html>
<head>
<style>
body {
           background-image: url("splash.png");
           background-repeat: no-repeat;
           background-position: center;
           background-color: #BEBEBE;
           font-family: "Arial", "Verdana", "serif";
           justify-content: center;
       }

  #container { display: block; position: relative;
               width: 60%; 
               top: 60%;   
               font-weight: bold;
               margin: auto;
       }



   #pretext { display: inline-block; color: #b80000; font-size: 3em;
            }
   #posttext { display: inline-block;
               color: #FFFFFF; font-size: 3.5em;
               font-weight: 1500; }

   #logo   {
             height: 50px; 
             position: absolute; 
             bottom: 1%;
             right:  1%;
             padding-bottom: 5px; 

           }
   #logo img   { height: inherit; vertical-align: top; }

   #svr-info { font-size: .75em; 
               color: #dae6f7;
               width: auto;
               position: absolute;
               bottom: 0px;
               right: 10px;
               padding-top: 5px;

             }

    #phpinfo a  {  font-size:  .75em;
                   text-decoration: none;
                }

     a:hover { font-size:  1.3em; }


</style>
</head>
<body>

<div id="container">
  <div id="pretext">Think</div>
  <div id="posttext">Correctly.</div>
</div>
<div id="logo">
  <img src="powerpc-logo.png" />
  <img src="apple-logo.png" />
</div> <br>

<div id="svr-info">
<?php 
    echo $_SERVER['SERVER_SOFTWARE'];
    echo "---";
    echo php_uname('r');
    echo "  ";
    echo php_uname('m');

?>
</div>
<div id="phpinfo">
<a href="test.php"> PHPINFO Page</a>
</div>

</body>
</html>`

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        .container {
            height: 100vh;
        }
        .text1 {
            display: inline-block;
            margin: 0 auto;
            
        }
    </style>
</head>
<body>
<div class="container" >
    <div style="display: table; margin: 0 auto; text-align: center; position: relative; top: 30%;">
        <img src="logo.png" style="width: 100px; height: 100px;"/>
        <br/>
        <h1 class="text1">Think Correctly</h1>
    </div>

    <div style="position: absolute; bottom: 10px; right: 10px;">
        <img src="logo2.png"/><span>Logo 2</span>
    </div>

</div>
</body>
</html>

＆＃13;

尝试使用此代码你可以阅读这个关于使用表格与使用显示表格的divs divs vs tables

Microsoft Edge中的CSS位置问题

我需要在CSS中做些什么才能正确定位该元素？

1 个答案: