Text is placed to left when aligned with image - html

Question

I'm trying to align an image (a flag) with a text. Like in this footer:
I'm trying style="display:inline-block;" elements but the text and image go to far to the left:
Original footer: (Blue arrow indicates a gap)
Codepen
https://codepen.io/anon/pen/xNNrQW

Answer 1

Remove display:inline-block from 'footer_text_right' and wrap the name 'Peru' inside a span tag
CODEPEN
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
/* new css */
.footer_text_right img {
min-width: 15px;
}
.footer_text_right span {
display: inline-block;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="margin-right15">
<p class="footer_text_right text-right"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg"
width="5%" height="5%">
<span>Perú</span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>

Answer 2

<p class="footer_text_right text-right" style="display:inline-block;vertical-align: middle; float:right;"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="15%" height="15%"> Perú</p>
Try this it works !!

Answer 3

Take out the img from p element and remove the inline style -- you use bootsrap so all you have to do is to set row class to wrap div (wrap of the p and img)
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul>li {
display: inline-block;
zoom: 1;
display: inline;
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="row">
<p class="footer_text_right text-right">Perú</p>
<img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="5%" height="5%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>

Answer 4

Please do style like this
<p class="footer_text_right text-right " style="display:inline-block;vertical-align: middle; float:right">Perú</p>
<img style="display:inline-block; margin-top:2px; float:right; vertical-align:middle" src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?cs=srgb&dl=asphalt-beauty-colorful-237018.jpg&fm=jpg" width="5%" height="5%" />
I checked this code in your codepen and it works fine.In stacks code snippet,due to small space its not showing well.

Answer 5

Please try this :
<div class="margin-right15" style=" text-align:right;">
Add style with class="margin-right15", its working and align right side.