html 右侧带有徽标的标题

Question

我正在尝试在居中标题旁边的右侧显示徽标

我尝试了几种 display:inline 和浮动的组合，但 h1 标题的居中属性似乎在该组合中不起作用。

你能告诉我正确的做法是什么吗？例如将徽标放入 css?欢迎任何关于如何解决问题的提示

Answer 1

您可以尝试按照下面的代码段进行定位。

header {
  position: relative;
  padding:0;  
  height: 80px;
  border: 1px solid;
}

h1 {
  text-align: center;
}

.logo-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;  
}

<header>
  <h1>My Heading</h1>
  <img src="http://via.placeholder.com/80x80" class="logo-img" alt="logo">
</header>

html 右侧带有徽标的标题

html headline with logo on the right side

html

css

text-align