user1060551 user1060551 - 4 years ago 129
HTML Question

Vertically center a div, then how to clean up input text values with jQuery?

I am trying to make a div to be in the center (vertically and horizontally) of another one, but was only able to horizontally center it, not vertically. Would you please let me know how to do that in my code below?

The second part of the question is: I have been trying to use jQuery to reset the input text values of my form through "button1", but that is not working too, would you know why?

Thank you so much!

Current outcome (outer div in gray, inner div in yellow):
enter image description here

Code:




Landing Page

<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 Source

      <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>

You can use flex to achieve that:

First setup display: flex property then align-items: center

    #outer {
        width: 100%;
        height: 500px;
        background-color: gray;
        display: flex;
        align-items: center;
    }   
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download