与图像对齐时，文本位于左侧

【问题标题】：Text is placed to left when aligned with image与图像对齐时，文本位于左侧
【发布时间】：2019-06-06 04:56:20
【问题描述】：

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

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

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

Codepen

https://codepen.io/anon/pen/xNNrQW

【问题讨论】：

  • 从p中取出img为<p></p>' then `\
  • 你使用引导程序吗？
  • 是的，我确实使用 bootstrap 4
  • 你用的是什么版本？
  • 我确实使用 bootstrap 4

标签： html css


【解决方案1】：

从 'footer_text_right' 中删除 display:inline-block 并将名称 '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>

【讨论】：

    【解决方案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>

    试试这个它有效！

    【讨论】：

      【解决方案3】：

      从p 元素中取出img 并删除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>

      【讨论】：

      • 告诉我更多帮助
      • 它把图像和文字放在左边，不需要。
      • 因为你使用col-md-5尝试增加屏幕（sn-p你有整页按钮）
      【解决方案4】：

      请做这样的风格
      &lt;p class="footer_text_right text-right " style="display:inline-block;vertical-align: middle; float:right"&gt;Perú&lt;/p&gt;

      <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 中检查了这段代码，它工作正常。在堆栈代码 sn-p 中，由于空间小，它显示不好。

      【讨论】：

        【解决方案5】：

        请试试这个：

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

        使用 class="margin-right15" 添加样式，使其正常工作并对齐右侧。

        【讨论】：

          猜你喜欢
          • 2016-07-11
          • 1970-01-01
          • 2015-01-25
          • 1970-01-01
          • 2020-10-17
          • 2015-03-22
          • 2019-11-22
          • 1970-01-01
          • 2012-08-07
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode