수직 정렬 요소

div 내에 요소를 가운데에 배치하는 방법을 이해하려고합니다. 내가 함께 일하고이 기본 코드를 가지고수직 정렬 요소

<body> 

<div style="width:960px;background-color:#d7d7d7;"> 

    <div style=" 
    width:400px; 
    padding:10px; 
    height:auto; 
    background-color:#006699; 
    display:inline-block; 
    "> 

    <p> Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
    </div>  

    <div style=" 
    width:100px; 
    padding:10px; 
    height:auto; 
    background-color:#b1b1b1; 
    float:right; 
    display:inline-block; 
    margin:auto!important; 
    vertical-align:middle; 
    "> 

    <p>This is a button</p> 

    </div>  

</div> 

</body>

그것은 기본적으로 왼쪽에 텍스트를 2로 나누어 1 개 사업부,의 중심에있을 '이것은 버튼입니다'요소를 얻으려고 노력하고 있고 오른쪽의 중앙에있는 'This is a button'레이블이지만, 나는 그것을 중앙으로 가져 오는 방법을 알아 내지 못합니다. 나는 모든 종류의 방법을 시도해 왔습니다.

모든 도움/조언을 부탁드립니다.

출처

2013-11-09 Naz

다음과 같은 마크 업을 수행 할 수 있습니다

<div class="container"> 
    <div class="left"> 
    <p>Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
    </div> 
    <div class="right"> 
    <p class="button">Click Me!</p> 
    </div> 
</div>

CSS :

.container { 
    width: 960px; 
    background-color: #d7d7d7; 
    overflow: hidden; 
    display: table; 
} 

.left, 
.right { 
    box-sizing: border-box; 
    width: 50%; 
    display: table-cell; 
} 

.left { 
    padding: 20px 10px; 
    background: #006699; 
} 

.right { 
    text-align: center; 
    vertical-align: middle; 
} 

.button { 
    border: 1px solid green; 
    display: inline-block; 
}

http://jsfiddle.net/yh6mn/1/

상관없이 당신의 단락의 크기 무엇 - 버튼에이 오른쪽은 항상 절대 중심에 정렬됩니다.

출처

2013-11-09 15:59:47 silicakes

음수 여백을 사용할 수 있습니다. 예를 참조하십시오 http://codepen.io/anon/pen/xhoBz

출처

2013-11-09 15:51:20 Pajn

수직 정렬 요소

답변

관련 문제