Html 当元素包含向右浮动的子元素时，如何正确地将其居中对齐？

我有一个标题和一个图像。我希望它们都出现在同一行。我希望标题与中心对齐，图像与右侧对齐

到目前为止，我的努力产生了以下结果：

正如您所见，由于图像的原因，“生成URL”标题稍微向左推。我怎样才能避免这种情况的发生，并保持它的中心

我的HTML标记如下所示：

<h1 class="renault-title text-center bottom-margin-med">
    Generate a URL 
    <img class="pull-right" src="{{ asset('bundles/urlBuilder/images/renault_english_logo_desktop.png') }}" style="height:49px;"  alt="Renault logo">
</h1>

生成URL

---

我正在使用Twitter引导。感谢您的帮助。

最简单的方法是将

img

放置在

位置：绝对

上

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
h1{
位置：相对位置；
填充：0 170px；//添加等于图像宽度的缩进以避免文本重叠。
字体大小：24px；
}
h1 img{
位置：绝对位置；
右：0；
排名：0；
}

生成URL

根据HTML其余部分的外观，您可以使用列

生成URL

绝对定位。图像必须从流中取出，因为其尺寸会影响“居中”项目的位置。或者使用背景图像。没有什么真正的理由让你必须在那里使用一个真实的图像…是吗？如果不是一个复制品，那也是相关的-虽然浮动会使一个元素脱离正常的文档流，但是像文本和图像这样的内联元素会在它周围流动。这就是为什么看到文本向左偏移的量与浮动图像的偏移量相同，文本在图像周围流动。

<div class="col-md-8 col-md-offset-2">
  <h1 class="renault-title text-center bottom-margin-med">
      Generate a URL 
  </h1>
</div>
<div class="col-md-2">
  <img class="pull-right" src="{{ asset('bundles/urlBuilder/images/renault_english_logo_desktop.png') }}" style="height:49px;"  alt="Renault logo">
</div>