Question

我正在尝试将图像（标记）与文本对齐。就像在此页脚中一样：

我正在尝试style="display:inline-block;"元素，但文本和图像位于最左侧：

原始页脚：（蓝色箭头表示空白）

Codepen

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

尝试一下就可以了！

Answer 2

从“ display:inline-block”中删除footer_text_right，并将名称“ Peru”包装在span标签中

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"><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">&copy; 2019 StickersGallito</span>
                    <a class="footer_text_right" href="/legal/privacy">Términos</a> &amp; <a class="footer_text_right" href="/legal/terms">Condiciones</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

请尝试：

<div class="margin-right15" style=" text-align:right;">

添加样式为class =“ margin-right15”的样式，其工作方式和右侧对齐。

Answer 4

从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">&copy; 2019 StickersGallito</span>
            <a class="footer_text_right" href="/legal/privacy">Términos</a> &amp; <a class="footer_text_right" href="/legal/terms">Condiciones</a>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 5

请这样做
<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中检查了此代码，它正常工作。在堆栈代码段中，由于空间太小，它不能很好地显示。

与图像对齐时，文本将放置在左侧

5 个答案: