CODEWITHSUNDEEP
htmlcss
Pablo Aguirre de Souza
Pablo Aguirre de Souza

Reputation: 4149

Centering pictures and text with Flexbox

I'm having trouble centering pictures alongside text inside a container. Everything I try does something to the text but the images always remain with a gap in the bottom.

I tried every single flexbox property and none of them do anything with the icons. My hint is that the problem lies on the way I architectured the flexbox, since it's only my second time using it. Another option could be something inherited from html or body styling. 

<div class="phone">
          <div class="nightmare">
            <a href="mailto:[email protected]"><img src="../C&C/img/email.png" width="18" height="18"></a>
          </div>
          <div>
            <a href="mailto:[email protected]">[email protected]</a>
          </div>

          <div class="nightmare">
            <a href="tel:+1-303-499-7111"><img src="../C&C/img/Call-Icon.png" width="18" height="18"></a>
          </div>
          <div>
            <a href="tel:+1-303-499-7111">(303) 499-7111</a>
          </div>
        </div>

.phone {
    flex-wrap: wrap;
    display: flex; 
    color: #ffffff;
    background-color: #004c00;
    justify-content: flex-end; 
    flex-direction: row;
    align-items: center;
    font-size: 1;       
}

.nightmare {
    align-items: center;
}

https://imgur.com/ydiABRa

The green banner is my banner, the blue banner is the way I want it to look (not the colour, just the tidiness of the display).

Upvotes: 1

Views: 147

Answers (4)

Giddy Naya
Giddy Naya

Reputation: 4658

Try the below snippet:

.phone{
    flex-wrap: wrap; 
    background-color: #004c00;
    flex-direction: row; 
    font-size: 1;    
    display:flex; 
    padding-left:20px;  
    padding-right:20px;  
    padding-top:5px;  
    padding-bottom:5px; 
}
a{ 
    color: #ffffff;  
    text-decoration: none
    padding-left:10px;  
    padding-right:10px;  
 } 
.nightmare2{
  margin-left: auto;
}
<div class="phone">
          <div class="nightmare">
            <a href="mailto:[email protected]"><img src="https://cdn2.iconfinder.com/data/icons/sem_labs_icon_pack/icons/mail2.png" width="18" height="18"></a>
          </div>
          <div>
            <a href="mailto:[email protected]">[email protected]</a>
          </div>

          <div class="nightmare2">
            <a href="tel:+1-303-499-7111"><img src="https://www.iconsdb.com/icons/download/white/phone-69-48.png" width="18" height="18"></a>
          </div>
          <div>
            <a href="tel:+1-303-499-7111">(303) 499-7111</a>
          </div>
        </div>

Upvotes: 1

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

You should use justify-content: center; to center align the items horizontally and align-items: center; to center align the items vertically. Secondly, you can wrap the icon and text in one div, instead of two separate divs and then you can use display: flex and align-items to handle the alignment of items.

See the below example

.phone {
    flex-wrap: wrap;
    display: flex; 
    color: #ffffff;
    background-color: #004c00;
    justify-content: flex-end; 
    flex-direction: row;
    font-size: 1;    
    justify-content: center; /** this will align items horizontaly **/
    align-items: center;  /** this will align items vertically **/
    min-height: 50vh;  /** Remove this. Added for demonstration only **/
}
.phone > div{
  align-items: center;
    display: flex;
}
.phone > div a{
      display: flex;
    align-items: center;
    color: #fff;
    font-family: Arial;
}
<div class="phone">

    <div class="c-item">
      <a href="mailto:[email protected]"><img src="https://img.icons8.com/pastel-glyph/2x/worldwide-location--v1.png" width="18" height="18" /></a>
       <a href="mailto:[email protected]">[email protected]</a>
    </div>
    <div class="c-item">
    <a href="tel:+1-303-499-7111"><img src="https://img.icons8.com/pastel-glyph/2x/worldwide-location--v1.png" width="18" height="18" /></a>
    <a href="tel:+1-303-499-7111">(303) 499-7111</a>
    </div>
    
          

         
         
        </div>

I have added necessary comments to the code snippet. This will help you.

Upvotes: 1

Bhanu
Bhanu

Reputation: 351

Hey the problem with your code is that you are trying to apply align-items to a class which doesn't have a display: flex property.

Also use this:

.nightmare a{
    display:flex;
    align-items: center;
}

Also using the chrom developer tool that, the child in the flex div doesn't have extra margins, which can be a cause of them not aligning.

Also I would write my markup this way.

<div class="phone">
    <div class="nightmare">
            <a href="mailto:[email protected]"><img src="../C&C/img/email.png" width="18" height="18">
            <p>[email protected]</p>
           </a>
   </div>

     <div class="nightmare">
            <a href="tel:+1-303-499-7111"><img src="../C&C/img/Call-Icon.png" width="18" height="18">
           <p>(303) 499-7111</p></a>
      </div>
</div>

and the CSS goes like this :

.phone{
display: flex;
}

.phone .nightmare a {
display: flex;
align-items : center;
}

.phone .nightmare a p{
margin-bottom : 0px;
}

Upvotes: 0

Faisal Rashid
Faisal Rashid

Reputation: 378

Add the following CSS to your img tags and remove the height and width attributes from them.

img {
  height: 1rem; /* Set it to your liking */
  margin-right: 10px;
  vertical-align: middle
}

This isn't a flexbox solution but will help you for sure.

Here's the codepen

https://codepen.io/faisalrashid/pen/BaBLKaB

Upvotes: 2

Related Questions