Centering pictures and text with Flexbox - html

Question

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">
<img src="../C&C/img/email.png" width="18" height="18">
</div>
<div>
contador#gmail.com
</div>
<div class="nightmare">
<img src="../C&C/img/Call-Icon.png" width="18" height="18">
</div>
<div>
[phone]
</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;
}
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).

Answer 1

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

Answer 2

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">
<img src="https://img.icons8.com/pastel-glyph/2x/worldwide-location--v1.png" width="18" height="18" />
contador#gmail.com
</div>
<div class="c-item">
<img src="https://img.icons8.com/pastel-glyph/2x/worldwide-location--v1.png" width="18" height="18" />
[phone]
</div>
</div>
I have added necessary comments to the code snippet. This will help you.

Answer 3

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">
<img src="https://cdn2.iconfinder.com/data/icons/sem_labs_icon_pack/icons/mail2.png" width="18" height="18">
</div>
<div>
contador#gmail.com
</div>
<div class="nightmare2">
<img src="https://www.iconsdb.com/icons/download/white/phone-69-48.png" width="18" height="18">
</div>
<div>
[phone]
</div>
</div>

Answer 4

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:cplusc#gmail.com"><img src="../C&C/img/email.png" width="18" height="18">
<p>contador#gmail.com</p>
</a>
</div>
<div class="nightmare">
<a href="tel:[phone]"><img src="../C&C/img/Call-Icon.png" width="18" height="18">
<p>[phone]</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;
}