Image alignment to the right of the div in Bootstrap

1

I know what is central alignment and center-block in bootstrap, but I would like to know how to align a right image of a div? I can not put the picture of the phone next to the number, I have to leave both numbers in the center of the page.

I'll put the code to understand it 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><footerclass="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>
    
asked by anonymous 27.01.2015 / 19:34

2 answers

1

Simple, reverse the order of the elements!

The class text-right is causing all children's elements to be aligned to the right, causing the order of these elements to be reversed.

Your code looks 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><footerclass="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>
    
28.01.2015 / 12:29
1

Use the pull-right class in the div / img you want to place 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>

    
08.02.2015 / 22:52