垂直對齊元素

我想了解如何將元素中的元素居中。我有我與合作這個基本的代碼，我試圖得到「這是一個按鈕」元素是在中心垂直對齊元素

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

它本質上是1個格，在左側分爲文字和a'這是一個按鈕'標籤位於右側的中心位置，但我無法弄清楚如何將其置於中心位置，我嘗試了各種方法。

所有幫助/建議表示讚賞。

來源

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

垂直對齊元素

回答

相關問題