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

Question

我正在使用一个 300 像素宽的 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

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

将对象显示设置为 inline-block 你不需要使用 float 通过使用 inline-block elements should arrange next只要父 div 足够宽，就可以相互关联。我还建议为内联元素添加固定宽度以适应 300px 父 div