右侧带有徽标的html标题答案

【问题标题】：html headline with logo on the right side右侧带有徽标的html标题
【发布时间】：2017-10-24 16:56:07
【问题描述】：

我正在尝试在右侧显示徽标，靠近居中的标题

我尝试了几种 display:inline 和 float 的组合，但似乎 h1 标题的 centered 属性在这种组合中并没有真正起作用。

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

【问题讨论】：

显示你的代码！
您能分享一下您已经尝试过的方法吗？
我不想显示我的代码，因为我一直在摆弄它并且它不起作用。重点在哪里？？我更专注于获得有关如何以正确方式实现这一点的提示，而不是摆弄我的代码直到它工作......jsfiddle.net/nfb7ns54

标签： html css text-align

【解决方案1】：

你可以尝试如下sn-p定位。

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>

【讨论】：

嗨，感谢您的回答。所以属性组合：img absolute 和 h1 center 就可以了。我仍然有显示：在 css 中内联，这会破坏结果。谢谢你