垂直對齊和浮動

對不起，如果我的問題看起來很愚蠢，但我花了太多時間在這。我有一個div顯示塊，包含兩個跨度，一個在右側，另一個在左側。垂直對齊和浮動

<div class="user-bar"> 
    <span class="username">Martin GOYOT</span> 
    <span class="user-options"><input type="button" class="disconnect" value="déconnexion"/></span> 
</div>

我嘗試了兩種東西，讓他們垂直對齊：首先一個，讓這兩個浮標，但問題是，我可以清楚地看到他們都出來了流量（正常）的，因而，如果我申請一個背景下，集裝箱，它不包括它們：

http://jsfiddle.net/M7Ffd/1/

二的解決方案，讓流程的第一，並把第二個爲float，但結果是，我無法找到了解如何垂直對齊它們：

http://jsfiddle.net/M7Ffd/2/（注意按鈕，即使它看起來並不真正垂直對齊）

所以，問題是：什麼是最好的解決方案，以及如何解決這兩個不良行爲中的至少一個。

謝謝，對不起，我是一個css新手。

來源

2012-12-28 Martin GOYOT

垂直對齊是一個難題。浮動似乎是每個人的第一個轉到一切的解決方案。避免goto方法，如何使用

position: absolute; 
right: 0;

http://jsfiddle.net/M7Ffd/3/

來源

2012-12-28 23:03:43 Falmarri

+1。僅供參考，Martin GOYOT，浮動從不服從垂直對齊。法瑪利的使用絕對定位的建議很好地工作。對於這個按鈕，你可以使用'right：0px'使它保持在右邊。 –

我喜歡你的解決方案，因爲它很簡單。但是，看看按鈕，它看起來不像垂直對齊...是否有其他規則要添加？ –

它看起來與我垂直。跨度應該垂直對齊（我假設你的意思是垂直居中）。如果不是，則可能是您的瀏覽器將不同樣式應用於輸入元素。 – Falmarri

這是你想要的東西怎麼樣？小提琴here

.user-bar { 
padding: 0.5em; 
margin: 0 1em 1em 1em; 
background-color: green; 
font-weight: bold; 
font-size: 1.25em; 
height:30px; 
min-width:300px; 
} 
.user-options { 
display: inline-block; 
background-color: #CCC; 
float: right; 
} 
.username { 
float: left; 
background: yellowgreen; 
}

設置的最小寬度，並給予高度解決了對準+背景溶液。

來源

2012-12-28 23:19:08

使用最小寬度和高度也是一個非常滑的斜率，如果您試圖讓自己的網站響應，就會下滑。 – Falmarri

在2個浮動子元素的父元素上使用clearfix hack來解決您的問題。

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; }

我更新你的提琴向你展示它http://jsfiddle.net/M7Ffd/5/

來源

2012-12-28 23:51:59

你的回答非常有趣，謝謝。我可能不會使用它，因爲「兩個浮動」解決方案並不能滿足我，但我會牢記未來的浮動問題。感謝你的分享。 –

垂直對齊和浮動

回答

相關問題