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

Question

I have a heading and an image. I want them to both appear on the same line as each other. I want the heading to be aligned center and the image to be aligned to the right.

My attempts so far have resulted in the following:

As you can see the heading 'Generate a URL' is pushed slightly to the left due to the image. How can I avoid this happening and keep it centered?

My HTML mark up is the following:

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

I am using Twitter Bootstrap. Appreciate any help.

Answer 1

Easiest way is to place img with position: absolute .

 @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; } 

 <h1 class="renault-title text-center bottom-margin-med"> Generate a URL <img src="http://placehold.it/125x49/ffcc00/" style="height:49px;" alt="Renault logo"> </h1> 

Answer 2

Depending on what the rest of your HTML looks like, you could use columns. 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>