HTML/CSS定位困惑

-3

我一直在寻找，我参加了一个关于codecademy的课程，但我仍然无法在自己的工作上做到这一点。问题是，当我读到它时，我明白它，但根本无法使用它，或者当我正在做我自己的网站时弄清楚如何去做。HTML/CSS定位困惑

我到底该如何定位到我想要的位置？我应该寻找什么？有像编辑定位100种方式，它使我很困惑..

我将不胜感激一些指示如何知道什么时使用定位。我有网站的想法，但所有这一切都非常艰难。我希望在将来也可以使用这些图片，但是我只是想先用html/css来创建图片。我认为我更像是一名设计师，但我真的希望我知道这一点，所以我可以从现在开始做好。

我的直接问题是如何将我移动到页面的中间位置，附近的

结束

我的CSS代码，现在是如下

  body 
      { 
       margin: 0; 
       background: #838383; 
       font-family: 'Oxygen', sans-serif; 
      } 
     header 
      { 
       height: 200px; 
       background: #222; 
       color: white; 

      } 

     nav 
      { 
       width: 500px; 
      } 

     nav ul 
      { 
       margin: 0; 
       padding: ; 
      } 
     nav ul li 
      { 
       color: white; 
       display: inline; 
       list-style-type: none; 
       padding: 5px 15px; 
      } 
     nav ul li a 
      { 
       color: white; 
      } 

     .login 
      { 
       margin: 300px; 
       text-align: center; 

      } 

     .login p 
      { 

      }

HTML代码

   <html> 
       <head> 
        <title> Login </title> 
        <link rel="stylesheet" href="css/style.css" /> 
       </head> 
       <body> 
        <header> 
         <nav > 
          <ul> 
           <li><a href="index.php">Home</a></li> 
           <li><a href="archive.html">Archive</a></li> 
           <li><a href="#">Login</a></li> 
          </ul> 
         </nav> 

         <div class="login"> 
          <h1>Login</h1> 
           <p><input type="text" name="login" placeholder="Username"></p> 
           <p><input type="password" name="password" placeholder="Password"></p> 
           <p><input type="submit" name="commit" value="Login"></p> 
         </div> 
        </header> 

       <footer></footer> 

       </body> 
      </html>

来源

2015-02-10 Xylus

_“我怎么会移动到页面的中间位置，临近年底” _我不明白你的要求。你能澄清吗？ – Jack 2015-02-10 20:54:21

这个问题很难阅读或理解与不完整的句子和缺少的科目。不过，从我可以收集的信息来看，听起来像你想要的是关于CSS定位的教程。对此，我说有成千上万的人在线。只要看看他们。 – leigero 2015-02-10 20:57:02

@Jack抱歉，我没有看到我没有完成这个句子。我试图将导航元素移动到屏幕中间（链接）然后向下。所以我想我需要编辑边距/填充，但这也会移动其他所有内容。 – Xylus 2015-02-10 21:04:10

这是你想要做的？：

http://jsfiddle.net/8y00nhnc/

这里是我改变什么：

nav 
     { 
      width: 500px; 
      margin: auto; 
      text-align: center; 
     } 

    nav ul 
     { 
      margin: 0; 
      padding: 0; 
     }

来源

2015-02-10 21:10:38 Jack

是的！我还使用了padding-top将其向下移动。非常感谢！ – Xylus 2015-02-10 21:18:08

根据您的更新意见在下面发布了一个答案。我认为这更多的是你要找的东西。一探究竟。 – user3781632 2015-02-10 21:25:03

-1

你想首先定位什么？它看起来像登录，因为你有很多利润。这会使您的登录浮动在页面中间。只适用于现代浏览器。你的HTML改为如下：

HTML

<body> 
    <header> 
     <nav > 
     <ul> 
      <li><a href="index.php">Home</a></li> 
      <li><a href="archive.html">Archive</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 
     </nav> 
    </header> 
    <div class="login"> 
      <h1>Login</h1> 
      <p><input type="text" name="login" placeholder="Username"></p> 
      <p><input type="password" name="password" placeholder="Password"></p> 
      <p><input type="submit" name="commit" value="Login"></p> 
    </div> 
    </div> 
    <footer></footer> 
</body>

CSS

body { 
    position: relative; 
} 

.login { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); /* add vender prefixes */ 
}

来源

2015-02-10 20:59:29

为了有黑色头区域内登录部分，你需要做的：

首先移动导航DIV中的登录DIV：

<nav> 
     <ul> 
      <li><a href="index.php">Home</a></li> 
      <li><a href="archive.html">Archive</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 

     <div class="login"> 
     <h1>Login</h1> 
     <p><input type="text" name="login" placeholder="Username"></p> 
      <p><input type="password" name="password" placeholder="Password"></p> 
       <p><input type="submit" name="commit" value="Login"></p> 
     </div> 
    </nav>

然后Nav的宽度改为100 ％：

nav { 
    width: 100%; 
    }

最后使用margin: 0 auto;居中登录股利，并给它一些填充的造型：

.login { 
    padding: 20px; 
    margin: 0 auto; 
    text-align: center; 
}

完整的示例： http://jsfiddle.net/1bhfm0bo/2/

来源

2015-02-10 21:23:01 user3781632

我正在寻找这个http://jsfiddle.net/1bhfm0bo/3/ 现在唯一的问题是我真的不知道如何垂直对齐整个登录类，而无需手动猜测margin-top （我有一种感觉，我这样做效率很低：/并且有更简单的方法） – Xylus 2015-02-10 21:28:54

哦，好的。你的问题不清楚。很高兴你解决了它。 – user3781632 2015-02-10 21:30:28

@Xylus有时候会手动猜测，直到它看起来正确。尝试使用％年龄而不是px值（如果有帮助）。 – leigero 2015-02-10 21:33:20

HTML/CSS定位困惑

回答

相关问题