Вертикально центрируемый неупорядоченный список и кнопка с фиксированной шириной

Question

Я работаю с div шириной 300px, который содержит неупорядоченный список значков, которые должны занимать по вертикали, а также кнопку.

Как должен выглядеть 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

Свойство вертикального выравнивания CSS задает вертикальное выравнивание встроенного блока или ячейки таблицы.

Когда отображение объектов установлено на inline-block вам не нужно использовать float используя inline-block элементы должны располагаться рядом друг с другом, пока родительский div достаточно широк. Я бы также предложил добавить фиксированную ширину к вашим встроенным элементам, чтобы они помещались внутри 300px родительский div