CSS가있는 가운데 두 요소

Question

양식과 div 옆에 div와 div를 모두 세로로 가운데 놓을 수 있습니까? 두 컨테이너가 내부 내용 높이 공간보다 작은 경우 스크롤 할 수 있어야합니다.

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

이 JSFiddle을 고려하시기 바랍니다.

Answer 1

이 시도 양식 모두가 수평 인 메시지 정렬 수직 센터는 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; 
} 

Answer 2

두 div의 float:left으로 문제를 해결할 수 없습니까?

JSFiddle : http://jsfiddle.net/4vtf5cn6/6/

추가 라인 **으로 표시됩니다, 그래서 그냥 아래의 코드를 복사하지 않는다)

#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; 
} 

결과 :

Answer 3

시도 이 DEMO

#form{ 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
} 
#login-request{ 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 4

옵션은 CSS 규칙의 margin-top 속성에 대한 백분율 값일 수 있습니다. 예를 들어 :

.container { 
 
    width: 150px; 
 
    height: 200px; 
 
    border: 3px solid orange; 
 
} 
 
.child { 
 
    /* Center horizontally */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
    /* Center vertically */ 
 
    margin-top: 50%; 
 
    
 
    width: 30px; 
 
    height: 40px; 
 
    border: 3px solid yellowgreen; 
 
}

<div class="container"> 
 
    <div class="child"></div> 
 
</div>

Answer 5

가장 쉬운에보고 방법은 #form 및을 묶는 <div>을 추가하는 것입니다.. 마찬가지로 :

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

및

는 CSS에서 :

#enclose { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    overflow-y: auto; 
} 

과 스타일 #form하고 당신이 그것을 필요로 #login-request