html - 居中行内 block 图像和文本

Question

我在文本旁边放置了一个图像，这两个都是行内 block 元素，但很难将它们居中。我试过将两者都包含在一个 div 中并应用 text-align:center，但没有任何变化。我也考虑过将 h1 更改为 display:block 然后应用 text-align:center，但我希望文本和标题都相对于其下方的内容居中，而不是整个事物稍微偏离了图像的位置。

HTML:

<img src="logo.svg">
<h1 id="logo-text">TITLE</h1>

CSS:

header img {
    display:inline-block;
    margin:0 auto;
    height:50px;
}

header h1#logo-text {
    display:inline-block;
    float:none;
    margin:0 auto;
    height:50px;
    line-height:50px;
}

Answer 1

header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
header img {
  height: 50px;
}
header h1#logo-text {
  display: inline-block;
  margin: 0;
  height: 50px;
  line-height: 50px;
}

<header>
  <img src="https://unsplash.it/200">
  <h1 id="logo-text">TITLE</h1>
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit eu diam et dapibus. Vestibulum mattis augue et gravida tincidunt. Etiam congue nisl id sem ornare, ac dignissim est aliquet. Aenean at venenatis est. Maecenas nunc tellus, imperdiet
  nec eros eu, ultrices euismod turpis. Donec faucibus gravida lectus, sit amet maximus nulla posuere id. Aliquam pulvinar dui non arcu tincidunt, nec maximus sem pretium. Sed aliquet dolor ac lectus aliquam, sit amet aliquam tortor imperdiet. Proin vitae
  diam tincidunt elit lobortis ultricies. Praesent tristique ex scelerisque posuere placerat.</p>

<p>Suspendisse potenti. Curabitur vel dictum odio. In congue egestas odio at lacinia. Aliquam vehicula felis nec faucibus vestibulum. Morbi sed augue accumsan, eleifend elit eget, luctus urna. Integer quis facilisis est. Ut at pretium erat. Mauris at neque
  justo. Ut eu ligula pretium, volutpat justo quis, malesuada turpis. Integer id consectetur urna. Etiam mauris enim, mattis ac finibus id, volutpat eget sapien. Donec quis libero sapien.</p>

您可以使用 flex 将其定位在中心，而无需任何肮脏的黑客攻击。无需额外加价。