保證金0自動不起作用，目標在頁面啓動時運行

你好，我是css begginer，我的應用程序html頁面有問題。我正在寫應用程序，我想創建登錄視圖，其中登錄窗體出現在語音命令或按鈕點擊後。我有2個問題，我不能集中我的表單（在jsbin這個CSS工作正常：D），我的目標事件（動畫）運行後，頁面準備好後沒有鏈接點擊。這是我的CSS：保證金0自動不起作用，目標在頁面啓動時運行

#przejscie 
{ 
    width: 340px; 
    display: block; 
    opacity: 0; 
    max-width: 100%; 
    margin: 0 auto; 
    position: relative; 
    top: 500px; 

transition: transform 20s, background 50s; 
-o-transition: -o-transform 16s, background 0.5s; 
-moz-transition: -moz-transform 0.5s, background 0.5s; 
-webkit-transition: -webkit-transform 3s, opacity 2s, background 0.5s; 
} 
#przejscie:target 
{ 
transform: translate(-200); 
-o-transform: scale(1.2); 
-moz-transform: scale(1.2); 
-webkit-transform: translate(0px,-300px); 

    opacity: 1; 
}

和我的形式：

<html> 
<head> 
    <script src="{% static 'js/artyom.min.js' %}"></script> 
    <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="stylesheet" type="text/css" href="{% static 'css/animacje.css' %}"/> 
</head> 

<h1><a href="#przejscie">Welcome register in our application</a></h1> 

<div id="przejscie" class="container col-sm-3 srodek col-md-offset-2"> 

      <form method="post" action="/PPProject-web/register" class="form-signin"> 

       <label for="email" class="sr-only">Adres e-mail</label> 
       <input name="email" class="form-control" id="email" type="email" placeholder="E-mail" required> 

       <label for="imie" class="sr-only">Imię</label> 
       <input name="imie" class="form-control" id="imie" placeholder="Imię" required> 

       <label for="nazwisko" class="sr-only">Adres e-mail</label> 
       <input name="nazwisko" class="form-control" id="nazwisko" placeholder="Nazwisko" required> 

       <label for="username" class="sr-only">Nazwa użytkownika</label> 
       <input name="username" class="form-control" id="username" placeholder="Nazwa użytkownika" required> 

       <label for="password" class="sr-only">Adres e-mail</label> 
       <input name="password" type="password" class="form-control" id="password" placeholder="Hasło" required> 

       <button class="btn btn-lg btn-primary btn-block" type="submit">Zarejestruj się</button> 

      </form> 
     </div> 

</html>

確定目標工作正常，但仍不能居中這個div。

來源

2015-12-21 Max

~~關閉我的頭頂，您的文檔似乎缺少 <body>標籤。~~

編輯：好吧，我認爲這絕對與絕對定位有關，而且您的表格佔據了寬度的100％。

margin: auto着眼於元件的寬度包括填充和邊界，計算與所述容器的寬度之間的差異，並在兩側緣同樣「在填充它」。所以如果表格佔據了整個身體的寬度，那麼就不會有任何利潤。

絕對定位需要一個「流出」元素，實質上導致它忽略其他元素。在這種情況下，瀏覽器不知道如何計算保證金，因此將其視爲零。

也許你可以試試position:relative？或者，您可以將所有四個位置屬性的零設置爲水平和垂直居中。（看到這個答案：css absolute position won't work with margin-left:auto margin-right: auto。）

我測試它將position: relative和width:50%添加到#przejscie，它似乎工作。

進一步閱讀：https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning

來源

2015-12-21 17:46:35 Yumecosmos

它有它，但現在它不改變幹啥 – Max

需要定義您正在定心

來源

2015-12-21 17:47:50

我聽說它需要的寬度，但它沒有幫助 – Max

你必須爲#przejscie定義一個寬度。如果你不知道它的寬度，你怎麼能把一個div放在身體中央？ –

我編輯的CSS，它仍然是一樣的。 – Max

自動餘量（餘量：0自動）的元件的寬度具有使用絕對位置聚焦時的空間沒有參考。你需要改變你的「絕對」位置「相對」。

，如果你需要使用絕對定位，我建議這樣的代碼：

#przejscie{ 
 
    display: block; 
 
    max-width: 100%; 
 
    width:400px; 
 
    margin:0 auto; 
 
    position: relative; 
 
    background:salmon; 
 
} 
 

 
    
 
    #przejscie2{ 
 
    width:400px; 
 
    position:relative; 
 
    background:red; 
 
} 
 

 

 

 
    .cont-form{ 
 
    width:100%; 
 
    height:auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    background:yellow; 
 

 
    }

<div id="przejscie" class="container col-sm-3 srodek col-md-offset-2"> 
 
      <form method="post" action="/PPProject-web/register" class="form-signin"> 
 
       <label for="email" class="sr-only">Adres e-mail</label> 
 
       <input name="email" class="form-control" id="email" type="email" placeholder="E-mail" required> 
 

 
       <label for="imie" class="sr-only">Imię</label> 
 
       <input name="imie" class="form-control" id="imie" placeholder="Imię" required> 
 

 
       <label for="nazwisko" class="sr-only">Adres e-mail</label> 
 
       <input name="nazwisko" class="form-control" id="nazwisko" placeholder="Nazwisko" required> 
 

 
       <label for="username" class="sr-only">Nazwa użytkownika</label> 
 
       <input name="username" class="form-control" id="username" placeholder="Nazwa użytkownika" required> 
 

 
       <label for="password" class="sr-only">Adres e-mail</label> 
 
       <input name="password" type="password" class="form-control" id="password" placeholder="Hasło" required> 
 

 
       <button class="btn btn-lg btn-primary btn-block" type="submit">Zarejestruj się</button> 
 

 
      </form> 
 
     </div> 
 

 

 
<br><br> 
 

 
<div class="cont-form"> 
 
<div id="przejscie2" class="container col-sm-3 srodek col-md-offset-2"> 
 
      <form method="post" action="/PPProject-web/register" class="form-signin"> 
 
       <label for="email" class="sr-only">Adres e-mail</label> 
 
       <input name="email" class="form-control" id="email" type="email" placeholder="E-mail" required> 
 

 
       <label for="imie" class="sr-only">Imię</label> 
 
       <input name="imie" class="form-control" id="imie" placeholder="Imię" required> 
 

 
       <label for="nazwisko" class="sr-only">Adres e-mail</label> 
 
       <input name="nazwisko" class="form-control" id="nazwisko" placeholder="Nazwisko" required> 
 

 
       <label for="username" class="sr-only">Nazwa użytkownika</label> 
 
       <input name="username" class="form-control" id="username" placeholder="Nazwa użytkownika" required> 
 

 
       <label for="password" class="sr-only">Adres e-mail</label> 
 
       <input name="password" type="password" class="form-control" id="password" placeholder="Hasło" required> 
 

 
       <button class="btn btn-lg btn-primary btn-block" type="submit">Zarejestruj się</button> 
 

 
      </form> 
 
     </div> 
 
</div>

來源

2015-12-21 18:01:32

保證金0自動不起作用，目標在頁面啓動時運行

回答

相關問題