固定宽度div中无序列表和按钮的垂直对中
固定宽度div中无序列表和按钮的垂直对中
提问于 2015-11-21 12:42:25
我正在使用一个div300px宽度，它包含一个必须垂直跨越的无序图标列表，以及一个按钮。
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;
}回答 1
Stack Overflow用户
发布于 2015-11-21 13:37:54
由于您的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的进一步阅读
垂直对齐CSS属性指定内联或表单元格框的垂直对齐方式。
如果将对象显示设置为inline-block，则不需要通过使用inline-block元素来使用inline-block，只要父div足够宽，inline-block元素就应该彼此排列在一起。我还建议在内联元素中添加一个固定宽度，以适应300px父div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33843483
复制相关文章
相似问题
腾讯云开发者
