I'm looking for a way to center inline-block elements, but I haven't had much luck so far. When I tried using margin-top: x em;, it just moved the image down instead of centering it. The inline-block is intentionally nested inside an image block. Any helpful resources or tips on how to properly position inline-blocks would be greatly appreciated, as I am still new to CSS and HTML.
#img-banner article {
border: solid thick white;
box-sizing: border-box;
display: inline-block;
width: 14em;
position: static;
}
#img-banner h1 {
font-family: 'Lobster', cursive;
text-align: center;
color: white;
font-size: 27px;
}<span id="img-banner">
<article>
<h1>Introduction</h1>
</article>
</span>