时间戳

首页 > 解决方案 > 列不会与 Rails 中的行中间对齐

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

问题描述

所以我在应用程序视图中有一个流体容器，在主视图中有另一个容器，有 4 行。第一行只有一列不会垂直对齐到行的中间。我尝试添加一个 align-middle 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>

标签： htmlcssbootstrap-4

解决方案

要将某些内容与屏幕中心（水平）对齐，您可以使用以下命令：

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

margin: auto将对齐元素居中

推荐阅读