mluis mluis - 20 days ago 5
CSS Question

Center two elements with CSS

How am I able to center vertically both the form and the and div next to it? I need to be able to scroll if the container of both is smaller than the inner content height space.

HTML:

<div id="outer_1">
<div id="inner_1">
<form id="form">
<input/>
<input/>
</form>
<div id="login-request">
If you do not have a login,
<span>touch here</span>
</div>
</div>
</div>


CSS:

#outer_1 {
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}

#inner_1 {
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}

#form {
text-align: center;
vertical-align: middle;
}

#login-request {
text-align: center;
vertical-align: middle;
}


Please consider this JSFiddle.

Answer

try this, the form and the message both are horizontally and vertical center aligned, look at it in http://jsfiddle.net/4vtf5cn6/10/

<div id="outer_1">
<div id="inner_1">
    <form id="form">
        <input/>
        <input/>
                <div id="login-request" class="login-request-alert">
        If you do not have a Travelport Mobile Agent login,
        <span class="urlink">touch here</span>
    </div>
    </form>
  </div>
 </div>



#outer_1{
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1{
padding-top:30px;
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
 }
#form{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
}
#login-request{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
 }