0

So I have a fluid container in the application's view, and another container in the home view with 4 rows. The first row has only one column that won't vertically align to middle of row. I've tried adding an align-middle Boostrap class, as well as adding a custom class({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>
gwalshington
  • 1,418
  • 2
  • 30
  • 60
Andrew BAO
  • 1
  • 2
  • Possible duplicate of [Bootstrap 4 Center Vertical and Horizontal Alignment](https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment) – HDP Jun 15 '18 at 04:55

1 Answers1

0

To align something to the center of the screen (horizontally) you can use the following:

text-align: center Will align text to be centered horizontally.

margin: auto will align elements to be centered

Jake
  • 1,086
  • 12
  • 38