How to center a text on the image side example below

Asked

Viewed 151 times

1

I’m making the creation of the site and wanted to leave the number on the side of the image and in the middle of the image inserir a descrição da imagem aqui

and how do I leave her like this inserir a descrição da imagem aqui

the code is like this 

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

2 answers

0

You can use the 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>

  • Our that perfect :D vlws by help

0


You can use 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

Depreciated and currently obsolete the attribute align to center the image in the text vertically:

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

  • Kadu only one Obs. the align tag is obsolete in HTML5. Although it still works, it is not recommended to use it, as in any new browser update they may fail to support it. Only one link of reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Recommended attributes would be to use vertical-align direct by the CSS or style. []s

  • Yes it is true...

Browser other questions tagged html css

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