css - Bootstrap 图标错位

Question

我正在尝试将我的话与图标对齐。我尝试了该站点的方法：按钮中文本和图标的垂直对齐

当前状态

我的代码：

<div class = "row">
    <div class = "col-md-8">
        <h3><%= link_to item.title, item , id: "font-colour" %></h3>    
        <p><%=  if item.description.length > 70
                    item.description[0..70].gsub(/\s\w+\s*$/, '...')
                else 
                    item.description
                end
        %></p>  

    </div>     

    <%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
        <i class="fa fa-square-o fa-2x align-center"></i>
    <% end %>

    <div class = "col-md-1">
        <%= link_to item_path(item), id: "font-colour", method: :delete do %>
            <i class="fa fa-trash fa-2x align-center"></i>
        <%end%>
    </div> 
</div>

标签： cssruby-on-railsbootstrap-4

Answer 1

添加display: flex;align-items: center;到row可能会有所帮助：

<div class = "row" style="display: flex;align-items: center;">
    <div class = "col-md-8">
        <h3><%= link_to item.title, item , id: "font-colour" %></h3>    
        <p><%=  if item.description.length > 70
                    item.description[0..70].gsub(/\s\w+\s*$/, '...')
                else 
                    item.description
                end
        %></p>  

    </div>     

    <%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
        <i class="fa fa-square-o fa-2x align-center"></i>
    <% end %>

    <div class = "col-md-1">
        <%= link_to item_path(item), id: "font-colour", method: :delete do %>
            <i class="fa fa-trash fa-2x align-center"></i>
        <%end%>
    </div> 
</div>