h1标题旁边的小图片

Question

我有一个非常简单的问题，但我无法绕过它。至少是为了一个优雅的解决方案。

我想在标题右侧显示一个应该在页面中心的图像。

<h1>My title</h1><img src="smallicon.png"/>

所以＆＃34;我的头衔＆＃34;应该在页面的中间和它右边的图标。 如果我在标题上设置float：left，那么它右边有图标但当然现在不再居中。

Answer 1

将图标移动到标题内部或之前，然后将其（图像）设置为float:right。

Answer 2

一个非常简单的方法是使用flexbox（当你有一个带有类＆＃34的容器;标题＆＃34;标题周围）：

.header {
  display: flex;
  justify-content: center;
}

Answer 3

<h1>My title <img src="smallicon.png" /></h1>

此？或者您希望文本居中，而不是图像？

h1 {
    position: relative;
}
h1 img {
    position: absolute;
    left: 100%;
}