如何使用引导程序使页脚文本居中，右侧有两个图像？

Question

我需要一些关于页面页脚的帮助。我想让页脚中的文本居中，页脚右侧有两个图像。提前谢谢你。

Footer

这是我的代码：

<div class="CopyRightFooter">
  <div class="col-md-7 col-lg-8">
    <p class="text-center FooterText text-md-center">©Copyright</p>
  </div>
  <div class="col-md-5 col-lg-4 ml-lg-0">
    <div class="text-md-center">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item"> <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" alt="Ig"> </a> </li>
        <li class="list-inline-item"> <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" alt="Fb"> </a> </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

.row {
  background: #2f405a;
}

.FooterText,
.social-links ul {
  margin-bottom: 0;
}

.social-links {
  position: absolute;
  right: 0;
  width: auto;
  height: 100%;
  display: flex;
  /* to center social links */
  align-items: center;
  /* to vertically center the text */
  justify-content: center;
  /* to horizontally center the text */
}

@media only screen and (max-width:767px) {
  .FooterText {
    color: #fff;
    padding-right: 90px;
    /* width of social links */
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row position-relative">
  <div class="col-md-12">
    <p class="text-center FooterText text-md-center">©Copyright Lorem Ipsum is simply dummy text of the printing</p>
  </div>
  <div class="col-md-12 col-lg-4 ml-lg-0 social-links">
    <div class="text-center">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item">
          <a>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" alt="Ig">
                        </a>
        </li>
        <li class="list-inline-item">
          <a>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" alt="Fb">
                        </a>
        </li>
      </ul>
    </div>
  </div>
</div>

您必须使用媒体查询。

    @media only screen and (min-width:767px) { /* You can change width as you required */
.social-links {
position: absolute;
right:0;
width: auto;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row position-relative">
<div class="col-md-12">
    <p class="text-center FooterText text-md-center">©Copyright</p>
</div>
<div class="col-md-12 col-lg-4 ml-lg-0 social-links">
    <div class="text-center">
        <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
                <a>
                    <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" alt="Ig">
                </a>
            </li>
            <li class="list-inline-item">
                <a>
                    <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" alt="Fb">
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

Answer 2

嘿，伙计，我认为你可以做这样的事情。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col"></div>
    <div class="col-6 text-center">
        <p>©Copyright</p>
    </div>
    <div class="col pr-5 text-right">
      <a>
        <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="pr-2" alt="Ig">
      </a>
      <a>
        <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="pl-2" alt="Fb">
      </a>
    </div>
</div>

如果这对你来说足够了，请告诉我。