Html 固定宽度div中的无序列表和按钮垂直居中

我正在使用一个300像素宽的div，它包含一个无序的图标列表，这些图标必须垂直排列，还有一个按钮

HTML/CSS需要什么样的外观才能：

A） 使无序列表向左浮动并垂直居中，以及 B） 按钮是否也位于UL的右侧，垂直居中

HTML:

---

由于您的

按钮

和

ul

设置为

显示：内联块

，您只需使用CSS

垂直对齐

属性即可

.someClass {
     display: inline-block;
     vertical-align: middle;
}

有关垂直对齐的更多信息，请参见：

垂直对齐CSS属性指定内联或表格单元格框的垂直对齐方式

当对象显示设置为

inline block

时，您不需要使用

float

，只要父div足够宽，就应该使用

inline block

元素彼此相邻排列。我还建议为内联元素添加一个固定宽度，以适合

300px

父div

.hb-left {
 width: 300px;
height: 50px;
}

.hb-left Ul {
float: left;
display: inline-block;
list-style-type: none;
margin: 0 auto;
}

.hb-left button {
height: 40px;
float: left;
display: inline-block;
margin: 0 auto;
}

.someClass {
     display: inline-block;
     vertical-align: middle;
}