CODEWITHSUNDEEP
javahtmlcssjsp
user3619298
user3619298

Reputation: 17

How to align the div to the center vertically in jsp

I'm developing a website for the first time. I have used two div tags. One is outer container whose width and height are set to 100%. Other one is inside container. I want to set this to the center vertically. similar to this website: http://www.bigcinemas.com/IN/home.aspx. But its not working. I tired something like this:

index.jsp

<div class="container">
            <div class="banner">
                <a class="logo" href="index.jsp">
                    <img src="images/logo.png" alt="Rainbow Entertainment" width="250px" height="50px"/></a>
                <div id="login">
                    <table style="background-color: purple">
                        <tr><td>Username : <input type="text"></td>
                            <td>Password : <input type="password"></td>
                            <td><a href="login.jsp">Sign in</a><input type="submit"></td></tr>
                    </table>
                </div>
            </div>
          </div>
         </body>
        </html>

menu.css

.container{
    width: 100%;
    height: 100%;
}

#banner{
    width: 60%;
    padding-left: 30%;
    padding-right: 30%;
    position: absolute;
}
.logo{
    margin-top: 5px;
    float: left;
    width: 20%;
    position: relative;
}

#login{
    width: 30%;
    float: right;
    padding-left: 10%;

}
#menu{
    height: 20%;
    width: 70%;
}
.menu_items{
   width: 80%;
    color:  white;
}

Also I want to the difference between id and class.

Upvotes: 2

Views: 11515

Answers (1)

wakey
wakey

Reputation: 2409

I was looking for a similar solution earlier today - check the answer on this question. How to vertically center a div for all browsers? . It sounds like the code provided there will suit your needs.

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

<p>Once upon a midnight dreary...</p>

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

CSS

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

Upvotes: 2

Related Questions