如果元素包含一个向右浮动的子元素，如何正确对齐元素呢？

Question

我有一个标题和图像。我希望他们两个出现在同一条线上。我希望标题与中心对齐，图像与右边对齐。

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

正如您可以看到标题＆＃39;生成网址＆＃39;由于图像，被略微向左推。我怎样才能避免这种情况发生并保持中心？

我的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>

我正在使用Twitter Bootstrap。感谢任何帮助。

Answer 1

最简单的方法是将transparent与img放在一起。

＆＃13;

＆＃13;

position: absolute

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

h1 {
  position: relative;
  padding: 0 170px; // Add indents equal to image width to avoid text overlapping.
  font-size: 24px;
}

h1 img {
  position: absolute;
  right: 0;
  top: 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据HTML的其余部分，您可以使用列。 CodePen

<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>