Twitter Bootstrap Question posted in

How can I center align an element correctly when it contains a child element floated right? – Twitter bootstrap

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:
enter image description here

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search