垂直對齊div元素的中間

所以基本上，我希望我的頁面看起來像這樣。徽標（綠色三角形）是「images/logo.png」，另外三個框是用戶名輸入/密碼輸入/提交按鈕。垂直對齊div元素的中間

我試圖不工作的代碼 - 這南瓜這一切在頁面的左側。

<div class="login-box"> 
      <div class="row"> 
       <div class="col-sm-2"> 
        <img src="{{ asset('images/logo.png') }}" /> 
       </div> 
       <div class="col-sm-10"> 
        <p align="center">{{ form_widget(form.username, {'attr': {'class': 'form-control', 'placeholder': 'authentication.username'|trans } }) }}</p> 
        <p align="center">{{ form_widget(form.password, {'attr': {'class': 'form-control', 'placeholder': 'authentication.password'|trans } }) }}</p> 
        <p align="center">{{ form_widget(form.log_in, {'attr': {'class': 'btn btn-lg btn-primary btn-block'}, 'label': 'authentication.log.in'|trans }) }}</p> 
       </div> 
      </div> 
     </div> 

<style> 
    .login-box { 
     width: 800px; 
     vertical-align: middle; 
    } 
</style>

我在做什麼錯？

感謝

來源

2015-10-29 b85411

讓我們假設你的父母element是視口的100％height和width。

如果您不介意使用transform屬性，只需幾行代碼即可輕鬆垂直對齊任何元素。

.class { 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

您可以在margin: 0 auto;扔如果你要水平對齊，以及（它是一個塊類型元素）。

Fiddle Here

將它應用到你的代碼：

確保的login-box父是100%height和width的元素。
將上述樣式應用於login-box類。

來源

2015-10-29 03:06:48 justinw

謝謝，這是做到了。 – b85411

我已經創建了一些虛擬數據example demo但你會得到的想法如何實現它

.col-sm-2, .col-sm-10 { 
min-height: 100vh; 
display: flex; 
align-items : center; 
}

來源

2015-10-29 02:42:10

這樣做可以垂直對齊，但它仍然全部被壓扁並左對中。看到這個圖片：http://postimg.org/image/r4fqdajfr/ - 感謝您的幫助我欣賞它:) – b85411

@ b85411我沒有訪問您使用的圖像，所以只有我可以爲你從你的代碼。創建一個jsfiddle與您的圖像和輸入字段，我可以幫助你在這更多 –

這只是一個144x144 PNG – b85411

你可能會考慮使用COL-SM-偏移改變位置你的形象和你的領域。嘗試：

使用「col-sm-offset-x」播放，直到您將其正確定位。

來源

2015-10-29 02:50:31

我想到了，但我不知道它如何幫助他垂直對齊中心？ –

垂直對齊div元素的中間

回答

相關問題