I have a 300px wide div that includes an unordered list of icons and a button that need to be vertically centered.
What would the HTML/CSS look like to achieve the following:
A) Float the unordered list to the left and center it vertically B) Place the button to the right of the unordered list, also vertically centered?
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;
}