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

Question

所以我在应用程序的视图中有一个流体容器，在主视图中有另一个4行的容器。第一行只有一列不会垂直对齐到行的中间。我尝试添加了一个align- adding类，以及添加了一个自定义类({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将使元素居中对齐