与图像对齐时，文本将放置在左侧
我正在尝试将图像（标记）与文本对齐。就像在此页脚中一样：
我正在尝试style="display:inline-block;"元素，但文本和图像位于最左侧：
原始页脚：（蓝色箭头表示空白）
Codepen
5 个答案:
答案 0 :(得分：1)
<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>
尝试一下就可以了！
答案 1 :(得分：1)
从“ display:inline-block”中删除footer_text_right，并将名称“ Peru”包装在span标签中
.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"><a href="https://twitter.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Twitter"><i class="fab fa-twitter footer_icons"></i></i></a></li>
<li class="margin-right3"><a href="https://www.instagram.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Instagram"><i class="fab fa-instagram footer_icons"></i></i></a></li>
<li class="margin-right3"><a href="https://facebook.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Facebook"><i class="fab fa-facebook-square footer_icons"></i></i></a></li>
<li class="margin-right3"><a href="https://www.youtube.com/user/stickersgallito" rel="nofollow noopener" target="_blank" title="YouTube"><i class="fab fa-youtube footer_icons"></i></i></a></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>
答案 2 :(得分：0)
请尝试：
<div class="margin-right15" style=" text-align:right;">
添加样式为class =“ margin-right15”的样式，其工作方式和右侧对齐。
答案 3 :(得分：0)
从img元素中取出p并删除inline样式-使用bootsrap，因此您要做的就是设置row类来包装div （p和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"><a href="https://twitter.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Twitter"><i class="fab fa-twitter footer_icons"></i></a></li>
<li class="margin-right3"><a href="https://www.instagram.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Instagram"><i class="fab fa-instagram footer_icons"></i></a></li>
<li class="margin-right3"><a href="https://facebook.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Facebook"><i class="fab fa-facebook-square footer_icons"></i></a></li>
<li class="margin-right3"><a href="https://www.youtube.com/user/stickersgallito" rel="nofollow noopener" target="_blank" title="YouTube"><i class="fab fa-youtube footer_icons"></i></a></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>
答案 4 :(得分：0)
请这样做
<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%" />
我在您的Codepen中检查了此代码，它正常工作。在堆栈代码段中，由于空间太小，它不能很好地显示。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？