垂直居中div，然後如何使用jQuery清理輸入文本值？

Question

我想讓一個div位於另一箇中心（垂直和水平），但只能水平居中，而不是垂直居中。你能否讓我知道在我的代碼中如何做到這一點？

問題的第二部分是：我一直試圖使用jQuery通過「button1」重置表單的輸入文本值，但那不起作用，你知道爲什麼嗎？

非常感謝！

當前結果（在黃灰色，內格外層div）：

代碼： 着陸頁

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

     <script> 
      $(document).ready(function() { 
       $("#button1").click(function() { 
        $('#inputFirstName').removeAttr('value'); 
        $("#inputFirstName").val(''); 
       }); 
      }); 

     </script> 

     <style> 
      #formTable { 
       border: 1px solid black; 
       margin: 0 auto; 
      } 

      #outer { 
       width: 100%; 
       height: 500px; 
       background-color: gray; 
      }    

      #inner { 
       width: 300px; 
       height: 300px; 
       margin: 0 auto; 
       background-color: yellow; 
      } 
     </style> 

    </h:head> 

    <h:body> 

     <div id="outer"> 
      <div id="inner"> 

       <h:form class="signupform"> 

        <p>Sign-up for more:</p> 

        <table id="formTable"> 
         <tr> 
          <td>First Name:</td> 
          <td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td> 
         </tr> 
         <tr> 
          <td>Last Name:</td> 
          <td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td> 
         </tr> 
         <tr> 
          <td>Email:</td> 
          <td><h:inputText id="inputEmail" value="#{visitor.email}"/></td> 
         </tr> 
        </table> 


        <p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/> 
        <h:outputText id="outputText" value="#{visitor.result}"/></p> 

       </h:form> 

       <button id="button1">Empty the div element</button> 

      </div> 
     </div> 

    </h:body> 
</html> 

Answer 1

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
     <script> 
 
      $(document).ready(function() { 
 
       $("#button1").click(function() { 
 
        $('#inputFirstName').removeAttr('value'); 
 
        $("#inputFirstName").val(''); 
 
       }); 
 
      }); 
 

 
     </script> 
 

 
     <style> 
 
      #formTable { 
 
       border: 1px solid black; 
 
       margin: 0 auto; 
 
      } 
 

 
      #outer { 
 
       width: 100%; 
 
       height: 500px; 
 
       background-color: gray; 
 
       display: flex; 
 
       align-items: center; 
 
      }    
 

 
      #inner { 
 
       width: 300px; 
 
       height: 300px; 
 
       margin: 0 auto; 
 
       background-color: yellow; 
 
      } 
 
     </style> 
 

 
    </h:head> 
 

 
    <h:body> 
 

 
     <div id="outer"> 
 
      <div id="inner"> 
 

 
       <h:form class="signupform"> 
 

 
        <p>Sign-up for more:</p> 
 

 
        <table id="formTable"> 
 
         <tr> 
 
          <td>First Name:</td> 
 
          <td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td> 
 
         </tr> 
 
         <tr> 
 
          <td>Last Name:</td> 
 
          <td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td> 
 
         </tr> 
 
         <tr> 
 
          <td>Email:</td> 
 
          <td><h:inputText id="inputEmail" value="#{visitor.email}"/></td> 
 
         </tr> 
 
        </table> 
 

 

 
        <p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/> 
 
        <h:outputText id="outputText" value="#{visitor.result}"/></p> 
 

 
       </h:form> 
 

 
       <button id="button1">Empty the div element</button> 
 

 
      </div> 
 
     </div> 
 

 
    </h:body> 
 
</html>

您可以使用Flex實現這一目標：

首次設置display: flex屬性，則align-items: center

#outer { 
     width: 100%; 
     height: 500px; 
     background-color: gray; 
     display: flex; 
     align-items: center; 
    } 

Answer 2

你可以使用transform: translate(-50%, -50%);到中心元素。 只需將您的位置設置爲相對於從outer div開始的inner div居中或將position: absolute;設置爲居中將inner div居中。

替換該你的CSS這一個：

head,body{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
#formTable { 
    border: 1px solid black; 
    margin: 0 auto; 
    } 
#outer { 
    width: 100%; 
    height: 500px; 
    background-color: gray; 
    }    
#inner { 
    width: 300px; 
    height: 300px; 
    background-color: yellow; 

    left: 50%; 
    top: 50%; 
    position: relative; 
    transform: translate(-50%, -50%); 
    } 

而對於jquery的部分用途：

$('#inputFirstName').val(''); 

Answer 3

在這裏你去：

http://jsbin.com/yazimovega/edit?html,output

的CSS垂直居中可以通過多種方式實現。此方法適用於您的目的：

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
} 

然後可以將孩子定位在父母面前。

對於JS，只需使用以下命令：

document.querySelectorAll("input[type=text")... 

然後你就可以通過輸入迴路，做你想要什麼。