I have a single list and an h1 header. My goal is to position the list on the left side of the screen and center the h1 vertically in relation to the list. The size of the list is variable, so I want the height and width to adjust accordingly without overlapping the header. If viewed on a smaller screen, the list should appear below the header. The h1 will consist of just one word, therefore the height of the container will be determined by the list.
HTML
<header>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<h1>BLOG</h1>
</header>
CSS
header{
width: 100%;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
ul, h1{
display: inline-block;
vertical-align:middle;
}
I have attempted various techniques, including pseudo-elements, but struggled with understanding them and spent many hours trying to solve this issue.
Apologies for any language errors.
Reference :
http://css-tricks.com/centering-in-the-unknown/
http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/
Thank you in advance.
UPDATE
Layout Photo Provided