divを垂直に中央に配置し、jQueryで入力テキスト値をクリーンアップする方法は？

Question

私はdivを別のものの中央（垂直方向と水平方向）にするようにしようとしていますが、垂直方向ではなく水平方向にのみ中心を置くことができました。あなたは私のコードの下でそれを行う方法を教えていただけますか？

質問の第2の部分は次のとおりです。「button1」を使用してフォームの入力テキスト値をリセットするためにjQueryを使用しようとしていましたが、これも機能しません。

ありがとうございました！

現在の結果（黄色のグレー、内側のdiv外側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>

あなたはそれを達成するためにフレックス使用することができます。

まずセットアップdisplay: flexプロパティを、その後align-items: center

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

Answer 2

あなたは要素を中央にtransform: translate(-50%, -50%);を使用することができます。 あなたの位置をinner divからouter divの中心に設定するか、position: absolute;と設定してinner divを体の中心に合わせます。垂直方向にもセンタリング

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

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

は、あなたが行く

は、このいずれかで、このあなたのCSSを交換してください任意の数の方法で達成することができる。この方法は、目的に応じて簡単に実行できます。

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

子を親に対して配置することができます。そして、あなたが入力をループとは、あなたが望むものを行うことができます

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

：JSについては

は、ちょうど次を使用します。