垂直對齊內部元素

我爲了解決特定問題的垂直對齊多個內部元素的問題而掙扎了很長時間。垂直對齊內部元素

我想實現看起來很像這個（上左文右垂直排列的操作按鈕，在被包圍的UI元素的中間對齊材料圖標）：

使用兌現的valign-wrapper我能夠垂直對齊動作按鈕的div，但我正在與邊界ul元素內的材質圖標掙扎。我準備了的jsfiddle來證明這一點：

https://jsfiddle.net/nafhLz1w/14/

注：<div class="suggestion-actionbuttons right">類「正確」做了浮動：權利;到這個元素。（物化框架）。

我總是想顯示在右側的操作按鈕一行
右側的兩個材料圖標應始終對齊，如圖中所給的例子

來源

2017-05-03 kentor

您需要使用white-space:nowrap防止inline-block期從包裝：

.suggestion-actionbuttons { 
    white-space: nowrap; 
}

Updated fiddle。

來源

2017-05-03 16:06:03

謝謝修復了我的兩個問題之一，但右側的動作按鈕看起來並不像所需。爲什麼那個ul的邊界那麼高？ – kentor

@ kentor，你可以使用'ul.actions-small {line-height：1;}'來控制它。如果您希望它們更小，請在'li'和'li .material-icons'上使用font-size/line-height。 –

小提琴鏈接 - https://jsfiddle.net/nafhLz1w/17/

使用Flex性質使得事情變得更加容易：

添加CSS類低於你的CSS文件的末尾。

.suggestion-text { 
    margin: 5px 0; 
    box-sizing : border-box; 
    padding : 20px; 
} 

.suggestion-actionbuttons{ 
    display : flex; 
} 

.actions-small{ 
    display : flex; 
} 
.approved{ 
    margin-top : 7px; 
}

來源

2017-05-03 16:17:55

垂直對齊內部元素

回答

相關問題