html - 无法将并排显示的 Logo 和文本居中

Question

我已尝试搜索此问题，但仍未弄清楚我的问题所在。我有一个由 Logo 组成的标题，然后并排显示一些标题文本。我希望这对在页面上居中。在以下示例中，它们并排但一直显示在页面左侧:

CSS:

#header_block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 80%
    text-align: center;
}

.header_item {
    display:inline-block;
}

HTML:

<div id='header_block'>
    <img class='header_item' src="img/logo.png" style="width:80px; height:80px;">
    <h1 class='header_item'>Title Goes Here</h1>
</div>

我尝试了各种变体，但居中部分对我不起作用。你能帮我解释一下我的困惑吗？非常感谢。

Answer 1

发生这种情况是因为 margin:auto 需要为容器指定宽度，在你的语法中你缺少分号 ; 在宽度之后我不知道可能是这将是一个错字，除此之外，您需要设置 vertical-align css 规则以使其更加具体

#header_block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 80%; /*<-- added semi colon*/
    text-align: center;
}
.header_item {
   display: inline-block;
   vertical-align: middle; /* add this */
}

Demo