웹 페이지의 CSS 위치

Question

누군가가 도와 드릴 수 있습니까? 나는이 디자인을 만들고 싶지만, 나는 위치에 문제가있다. 여기에 이미지 Here is code

> https://plnkr.co/edit/Smyes7rZXVcqq5IugW2o?p=preview 

Answer 1

아래의 골격 가장 당신을 위해 일 것입니다.

상위 div의 높이를 설정하고 표에 표시하십시오 (여기에서 최소 높이는 작동하지 않음). 하위 div의 표시를 table-cell로 설정하고 vertical-align을 중간으로 설정하면 상위 div의 내용을 세로로 정렬 할 수 있습니다. 콘텐츠 높이가 변경 되더라도 하위 콘텐츠는 자동으로 세로로 정렬됩니다.

<div class="container"> 
    <div class="col-sm-6 left"> 
    <div class="inner"> 
     <span>become our partner</span> 
     <a href="#">contact us</a> 
    </div> 
    </div> 

    <div class="col-sm-6 right"> 
    //right side content 
    </div> 
</div> 

.left{ 
    height: 500px; 
    background: #ccc; 
    display: table; 
} 
.inner{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
.inner span, .inner a{ 
    display: block; 
    text-transform: uppercase; 
}