Question

我正在处理一个300px宽的div，其中包含一个必须垂直跨越的无序图标列表以及一个按钮。

HTML / CSS需要看起来像什么：

A）将无序列表向左浮动并垂直居中，并且 B）按钮在UL的右侧，垂直居中吗？

HTML：

 <div class="hb-left">
 <ul>
 <li><img src="cat.jpg"></li>
 <li><img src="dog.jpg"></li>
<li><img src="mouse.jpg"></li>
</ul>
<button>Demo</button>
</div>

CSS：

.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;
}

Answer 1

由于您的button和ul设置为display: inline-block，因此您只需使用CSS vertical-align属性。

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

有关vertical-align：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

的进一步阅读

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

将对象显示设置为inline-block时，您不需要使用float使用inline-block元素，只要父div足够宽，就应该彼此相邻排列。我还建议为内联元素添加固定宽度以适合300px父div

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

1 个答案: