1

Estou fazendo a criação do site e queria deixa o numero do lado da imagem e no meio da imagem inserir a descrição da imagem aqui

e como faço para deixar ela assim inserir a descrição da imagem aqui

o código esta assim

<section id=contato>CONTATOS</section>
<i class="fa fa-whatsapp" style="font-size:36px;color:#1BD741" onclick="window.open('https://api.whatsapp.com/send?1=pt_BR&phone=551141953004')"></i>   (11) xxx-xxx
<i class="fa fa-whatsapp" style="font-size:36px;color:#1BD741" onclick="window.open('https://api.whatsapp.com/send?1=pt_BR&phone=551141931059')"></i>   (11) xxx-xx

2 Respostas 2

0

Você pode usar css vertical-align

.vertical-align {
  vertical-align: middle;
}

.contact-container {
  color: #666;
  text-align: center;
}

.margin-right-10 {
  margin-right: 10px;
}

.margin-left-30 {
  margin-left: 30px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="contact-container">

  <section id="contato" class="margin-bottom-10">CONTATOS</section>
  <i 
    class="fab fa-whatsapp vertical-align margin-right-10" 
    style="font-size:36px;color:#1BD741" 
    onclick="window.open('https://api.whatsapp.com/send?1=pt_BR&phone=551141953004')"
  ></i> (11) xxxx-xxxx
  <i 
    class="fab fa-whatsapp vertical-align margin-right-10 margin-left-30" 
    style="font-size:36px;color:#1BD741" 
    onclick="window.open('https://api.whatsapp.com/send?1=pt_BR&phone=551141931059')"
  ></i> (11) xxxx-xxxx
</div>


@OBSOLETE

Foi depreciado e atualmente está obsoleto o atributo align para centralizar a imagem no texto verticalmente:

<p>This is some text. <img src="https://via.placeholder.com/60" alt="Smiley face" width="42" height="42" align="middle"> This is some text.</p>

2
  • Kadu só uma obs. a tag align está obsoleta no HTML5. Embora ela ainda funcione, não é recomendado o uso, pois em qualquer nova atualização do browser eles podem deixar de dar suporte a isso. Só um link de referência developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img#Atributos o recomendado seria usar vertical-align direto pelo CSS ou style. []´s
    – hugocsl
    Commented 20/03/2019 às 17:11
  • Sim é verdade...
    – KaduAmaral
    Commented 20/03/2019 às 19:50
0

Você pode usar o float:left

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section id="contato">CONTATOS</section>
<i class="fa fa-whatsapp" style="font-size:36px;color:#1BD741;float: left;" onclick="window.open('https://api.whatsapp.com/send?1=pt_BR&amp;phone=551141953004')"></i>   
<span style="float: left; padding: 8px;">(11) xxx-xxx</span>
<i class="fa fa-whatsapp" style="font-size:36px;color:#1BD741;float: left;" onclick="window.open('https://api.whatsapp.com/send?1=pt_BR&amp;phone=551141931059')"></i>   
<span style="float: left; padding: 8px;">(11) xxx-xx</span>

1
  • nossa que perfeito :D vlws pela ajuda
    – caiquesey
    Commented 21/03/2019 às 12:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .