(Bootstrap 4):将按钮与文本对齐在同一行

Sao*_*awy 1 html css bootstrap-4

如何将所有内容对齐divs在同一条线上。我的意思是我希望按钮像这样的图像一样以文本居中,例如,社交图标像文本一样居中,而不是像我在黑暗中那样向下

在此输入图像描述

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="main-footer" class="bg-dark">
    <div class="container d-flex flex-sm-column  justify-content-between py-3">
      <div class="row  py-4 text-center align-content-between flex-wrap">
        <div class="col-lg-4 mb-3">
          <p class="text-secondary">Copyright &copy; Saud</p>
        </div>
        <div class="col-lg-4 mb-3 ">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal">
            Contact Us
          </button>
        </div>
        <div class="col-lg-4 mb-3">
          <ul class="list-inline quicklinks">
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
Run Code Online (Sandbox Code Playgroud)

Zim*_*Zim 6

要将它们居中对齐,请制作列d-flex并使用align-items-center...

    <div class="row text-center py-4 align-content-between flex-wrap">
        <div class="col-lg-4 d-flex justify-content-center align-items-center">
            <p class="text-secondary mb-0">Copyright &copy; Saud</p>
        </div>
        <div class="col-lg-4">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal"> Contact Us </button>
        </div>
        <div class="col-lg-4 d-flex justify-content-center align-items-center">
            <ul class="list-inline quicklinks mb-0">
                <li class="list-inline-item">
                    <a href="#">Privacy Policy</a>
                </li>
                <li class="list-inline-item">
                    <a href="#">Terms of Use</a>
                </li>
            </ul>
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

https://codeply.com/p/BBJM8P9UPR