Image alignment to the right of the div in Bootstrap

Asked

Viewed 39,475 times

1

I know what central and center-block alignment is in bootstrap, but I’d like to know how to line up a picture to the right of a div? I’m unable to place the phone image next to the number, I have to leave the two numbers in the center of the page.

I’ll put the code in so you’ll understand better:

footer{ margin-top:20px;}

.telefone{ width:45%; float:left; margin-right:10%;}
.telefone img{ float:right; }
.telefone p{font-family: 'Oxygen', sans-serif; font-size:1.5em; font-stretch:normal; font-weight:bold; padding:5px; float:right;}
.whatsapp{ width:45%; float:left;}
.whatsapp img{ float:left; margin-right:10px;}
.whatsapp p{font-family: 'Oxygen', sans-serif; font-size:1.5em; font-stretch:normal; font-weight:bold; padding:5px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer class="container">
<div class="row">
<div class="col-sm-12">
<address>
  <div class="telefone text-right">
  	<img src="imagens/telefone.png" class="img-responsive" />
    <p>(85) 8743.1561</p>
  </div>
  <div class="whatsapp">
  	<img src="imagens/whatsapp.png" class="img-responsive" />
    <p>(85) 8118-9716</p>
  </div>
  <div style="clear:both"></div>
  <div>Av. Major Assis, 2315 - Vila Velha - Fortaleza - Ceará</div>
</address>

<address>
  <strong>Full Name</strong><br>
  <div class="glyphicon glyphicon-envelope"></div><a href="mailto:#">[email protected]</a>
</address>
</div>
</div>
</footer>

css html5 twitter-bootstrap

  • Have you tried the pull-right class ?

  • No longer aligned to the right?

  • André Ribeiro no, the phone is on the side of the picture! so it’s wrong

  • In the P tag styles, try to put display:block-inline;

  • Some of these answers answered him?

  • Do you know you can accept answers? See tour. You can accept an answer per question you asked. You can even accept your answer if it was the one that helped you best.

Show 1 more comment

2 answers

2

Simple, reverse the order of the elements!

The class text-right is causing all her child elements to be aligned to the right, causing the order of these to be reversed.

Your code would look like this:

footer{ margin-top:20px;}

.telefone{ width:45%; float:left; margin-right:10%;}
.telefone img{ float:right; }
.telefone p{font-family: 'Oxygen', sans-serif; font-size:1.5em; font-stretch:normal; font-weight:bold; padding:5px; float:right;}
.whatsapp{ width:45%; float:left;}
.whatsapp img{ float:left; margin-right:10px;}
.whatsapp p{font-family: 'Oxygen', sans-serif; font-size:1.5em; font-stretch:normal; font-weight:bold; padding:5px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer class="container">
<div class="row">
<div class="col-sm-12">
<address>
  <div class="telefone text-right">
    <p>(85) 8743.1561</p>
    <img src="imagens/telefone.png" class="img-responsive" />
  </div>
  <div class="whatsapp">
  	<img src="imagens/whatsapp.png" class="img-responsive" />
    <p>(85) 8118-9716</p>
  </div>
  <div style="clear:both"></div>
  <div>Av. Major Assis, 2315 - Vila Velha - Fortaleza - Ceará</div>
</address>

<address>
  <strong>Full Name</strong><br>
  <div class="glyphicon glyphicon-envelope"></div><a href="mailto:#">[email protected]</a>
</address>
</div>
</div>
</footer>

  • 1

    I don’t know if that’s the problem... let’s wait and see what AP says.

  • According to my interpretation of his question, this is the answer, however, I cannot explain exactly why the class text-rightis doing it with your child elements. =/

1

Use the class pull-right in the div/img you want to put right or directly in css float:right

Example:

<div class="telefone text-right">
<img src="imagens/telefone.png" class="img-responsive pull-right" />
<p>(85) 8743.1561</p>

  • 1

    @rrnan, I’ll put

  • @rrnan, the offset will be limited to the size of the div, the image will be pasted on the right side of the div

  • Thanks for the edition.

Browser other questions tagged css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.