Bootstrap 4 中的垂直对齐

问题描述 投票：0回答：2

我在 Bootstrap 4 中进行了以下设置：Bootply 链接

其中包含“供应商”文本的元素应该垂直居中，我有不同的行具有相同的代码，我希望它们居中。似乎没有解决方案对我有用。

这里有人可以找到我做错的地方并指出我正确的方向吗？

谢谢你。

css twitter-bootstrap bootstrap-4
2个回答
87
投票

您可以像这样使用

flex-xs-middle
类..

引导程序 4 Alpha 5

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5（使用启用 Bootstrap 4 Flexbox 的 CSS）

引导程序4

Bootstrap 4.0.0 更新

现在 Bootstrap 4 默认情况下是 flexbox，有许多不同的垂直对齐方法：使用 auto-margins、flexbox utils 或 display utils 以及 verticalalign utils。乍一看，“垂直对齐实用程序”似乎很明显，但这些“仅”适用于内联和表格显示元素。以下是 Bootstrap 4 垂直居中选项。 请记住，垂直对齐是相对于父高度的。

1 - 使用自动边距垂直居中：

垂直居中的另一种方法是使用

my-auto

。这将使元素在其容器内居中。例如，

h-100
使行全高，
my-auto
将使 
col-sm-12
列垂直居中。
<div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card card-block w-25">Card</div> </div> </div> 

使用自动边距的垂直居中
演示


my-auto
 表示垂直 y 轴上的边距，相当于：


margin-top: auto;
margin-bottom: auto;






2 - 带 Flexbox 的垂直居中：





自 Bootstrap 4 
.row
 变为 
display:flex
 以来，您只需在任何列上使用 
align-self-center
 即可将其垂直居中...


       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>




或者，在整个 
align-items-center
 上使用 
.row
 垂直居中对齐该行中的所有 
col-*
...


       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>




垂直居中不同高度列
演示


重要：要对齐的元素的direct父级必须定义高度！ 




3 - 使用显示实用程序垂直居中：


Bootstrap 4 有 
display utils
，可用于 display:table、
display:table-cell
、
display:inline
 等。这些可以与 
verticalalignment utils
 一起使用来对齐内联、内联块或表格单元格元素.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>




使用显示实用程序的垂直居中
演示
    




      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        
.my-auto
 类在页面上垂直居中放置一个 main 元素，在需要之前对每个元素应用全高；使用以下其中一项：




    .h-100
  •  Bootstrap 类
    • height: 100vh;
  • 风格
    • height: 100%;
  • 风格
    


    • 示例：



<body class="h-100">
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-12 my-auto"> <!-- Finally! -->
        <div class="jumbotron">
          ...
        </div>
      </div>
    </div>
  </div>
</body>


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.