html - 列不会与 Rails 中的行中间对齐

Question

所以我在应用程序 View 中有一个流体容器，在主视图中有另一个容器，有 4 行。第一行只有一列不会垂直对齐到行的中间。我试过添加一个中间对齐的 Boostrap 类，以及添加一个自定义类 ({height:50vh})。

<div class="container-fluid preview-height no-padding"> 
      <% @posts.each do |p| %>    
        <div class="container-fluid d-block"> 


          <div class="row disp-margin text-white preview-height bg-cover bg-img"             style="background-image: url('<%= p.image.length > 0 ? p.image :               default_background_url %>');"> 

              <div class="col-lg-12 text-center vcenter">
                      <p class="h1"><a><%= p.title %></a></p><%# Post's title...%>
                      <a class="bordera m-padding"><%= p.style %></a>
                      <a class="bordera m-padding"><%= p.genre %></a>
                      <a class="bordera m-padding"><%= p.platform %></a>   
                      <h3><%= p.likes.length %> likes</h3> 
                      <%= p.body %> 
              </div>

          </div>


          <div class="row b-padding bg-white text-center"> 
              <h3 class="col-lg-12 text-center">by <%= p.user.name %>
          </div>


          <div class="row no-padding bg-white h1">  
              <h3 class="col-lg-12 text-center"> 
                <%= link_to "Like", post_likes_path(p), method: :post %> 
              </h3> 
              <h4 class="col-lg-12 text-center">
                <%=link_to("Back to the top","#", class:'text-dark')%> 
              </h4>
          </div> 


        </div>
      <% end %> 
</div> 

Answer 1

要将某些内容(水平)对齐到屏幕中心，您可以使用以下方法:

text-align: center 将文本水平居中对齐。

margin: auto 将元素居中对齐