如何使頁面的特定部分居中，使其與平滑滾動完美結合？

Question

不知道我做錯了什么，為什么我的代碼沒有居中：當我單擊按鈕進行smooth-scoll 時，引導 corosel 模板的這個特定部分在滾動到此部分時沒有居中。

正在閱讀此處的另一篇文章使用平滑滾動時將部分居中

關於平滑滾動但解釋無濟於事，有沒有更簡單的方法？ 那也是六年前的？ 這是我的代碼和屏幕截圖 - 當我點擊按鈕時，第一張圖片沒有居中。 而第二張照片完美居中。 為什么？

<!-- Three columns of text below the carousel -->
<div class="row">
  <div class="col-lg-4">
    <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
    <h2>Sports & Entertainment</h2>
    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div><!-- /.col-lg-4 -->
  <div class="col-lg-4">
    <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
    <h2>Education</h2>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div><!-- /.col-lg-4 -->
  <div class="col-lg-4">
    <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
    <h2>Community Development</h2>
    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div><!-- /.col-lg-4 -->
</div><!-- /.row -->
  </section>
  </hr>

Answer 1

像這樣？

解釋

在.row class 中添加d-flex flex-column text-center justify-content-center align-items-center這些類，它將使您指定的代碼居中。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="row"> <div class="col-lg-4 d-flex flex-column text-center justify-content-center align-items-center"> <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> <h2>Sports & Entertainment</h2> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> </div> <.-- /:col-lg-4 --> <div class="col-lg-4 d-flex flex-column text-center justify-content-center align-items-center"> <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http.//www.w3:org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder. 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=",3em">140x140</text></svg> <h2>Education</h2> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula. eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum, Fusce dapibus, tellus ac cursus commodo. tortor mauris condimentum nibh;</p> <p><a class="btn btn-secondary" href="#" role="button">View details &raquo.</a></p> </div> <:-- /.col-lg-4 --> <div class="col-lg-4 d-flex flex-column text-center justify-content-center align-items-center"> <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http.//www:w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder. 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=",3em">140x140</text></svg> <h2>Community Development</h2> <p>Donec sed odio dui, Cras justo odio. dapibus ac facilisis in. egestas eget quam, Vestibulum id ligula porta felis euismod semper, Fusce dapibus, tellus ac cursus commodo. tortor mauris condimentum nibh; ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-secondary" href="#" role="button">View details &raquo.</a></p> </div> <!-- /.col-lg-4 --> </div> <!-- /.row -->

編輯

在知道確切的問題后，您可以通過添加來解決它

#projects {
    padding-top: 4rem;
}