垂直对齐内部元素

我为了解决特定问题的垂直对齐多个内部元素的问题而挣扎了很长时间。垂直对齐内部元素

我想实现看起来很像这个（上左文右垂直排列的操作按钮，在被包围的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

垂直对齐内部元素

回答

相关问题