Bootstrap 与Bootstrap 3垂直对齐 返回

与Bootstrap 3垂直对齐


Colin
2025-03-15 07:16:01 (24天前) 
  1.             我正在使用Twitter


引导
</跨度>
3，当我想垂直对齐两个div时，我有问题，例如“JSFiddle link”：

＆lt;！ - 最新编译和缩小的CSS - ＆gt;
＆lt; link rel =“stylesheet”href“=”https://maxcdn.bootstrapcdn.com/

引导
</跨度>
/3.3.4/css/bootstrap.min.css”>

＆lt;！ - 可选主题 - ＆gt;
＆lt; link rel =“stylesheet”href =“https://maxcdn.bootstrapcdn.com/

引导
</跨度>
/3.3.4/css/

引导
</跨度>
鈥

15 条回复
  1. 0# 荧惑 | 2019-08-31 10-32


    我想我会分享我的“解决方案”，以防它帮助其他不熟悉@media查询的人。



    感谢@HashemQolami的回答，我构建了一些媒体查询，这些查询可以像col- 类一样移动起来，这样我就可以堆叠col- 用于移动设备，但是在中心垂直对齐显示大屏幕，例如



    1.     
            

          

          

    3. </code>
    4.


    。



    1.     
            .row-xs-flex-center {
          display:flex;
          align-items:center;
      }
      @media ( min-width:768px ) {
          .row-sm-flex-center {
              display:flex;
              align-items:center;
          }
      }
      @media ( min-width: 992px ) {
          .row-md-flex-center {
              display:flex;
              align-items:center;
          }
      }
      @media ( min-width: 1200px ) {
          .row-lg-flex-center {
              display:flex;
              align-items:center;
          }
      }
    2. </code>
    3.


    每个屏幕分辨率需要不同列数的更复杂的布局（例如，-xs为2行，-sm为3，-md为4等）需要更高级的finagling，但对于带-xs的简单页面堆叠和-sm和更大的行，这工作正常。


  2. 1# Just do it | 2019-08-31 10-32



    有几种方法可以做到



    1。



    1.     
            display: table-cell;
      vertical-align: middle;
    2. </code>
    3.


    以及容器的css



    1.     
            display:table;
    2. </code>
    3.




    1. 使用填充和媒体屏幕相对于屏幕大小更改填充。
      谷歌@media屏幕了解更多





    2. 使用相对填充
      即以％表示填充



      3. </醇>


      希望能帮助到你


  3. 2# 老人与海 | 2019-08-31 10-32


    HTML



    1.     
            

          

          

          

          

    3. </code>
    4.


    CSS



    1.     
            .pull-bottom {
          display: inline-block;
          vertical-align: bottom;
          float: none;
      }
    2. </code>
    3.

  4. 3# 咿呀哟 | 2019-08-31 10-32



    我刚刚做了这个，它做了我想做的事。



    1.     
            .align-middle {
        margin-top: 25%;
        margin-bottom: 25%;
      }
    2. </code>
    3.


    现在我的页面看起来像



    1.     
            

          content
    36. —————————————
    44. </code>
    45.

  5. 4# 不浪漫 | 2019-08-31 10-32


    这是我的解决方案。只需将此类添加到您的CSS。



    1.     
            .align-middle {
        display:flex;
        justify-content:center;
        align-items:center;
      }


    然后你的HTML看起来像这样。



    1.     
            

        

          
      Item

          
      Item

        

        

          
      Item

        

    3. </code>
    4.   






    1.         
                .align-middle {
        display:flex;
        justify-content:center;
        align-items:center;
      }
              
            


    1.         
                
        
          
          
          
          
      <!DOCTYPE html>
          <span class="pln">Title</span>
        
        
          

            

              

                

                  
      Item

                  
      Item

                

                

                  
      Item





  6. 5# 十二* | 2019-08-31 10-32



    使用Bootstrap 4（目前处于alpha版本），您可以使用

    .align-items-center

    类。所以你可以保持Bootstrap的响应特性。
    工作对我来说很好。看到

    Bootstrap 4文档

    。


  7. 6# Little it | 2019-08-31 10-32


    自Bootstrap 4添加以来，本机支持Flex行为

    d-flex align-items-center

    在里面

    row

    DIV。您不再需要修改您的CSS。



    简单的例子：

    http://jsfiddle.net/vgks6L74/



    1.     
            

        
        Big 

        
       Small 

    3. </code>
    4.


    用你的例子：

    1. <a href="http://jsfiddle.net/7zwtL702/" rel="nofollow noreferrer">
    2.   http://jsfiddle.net/7zwtL702/
    3. </A>



    1.     
            

    2.     

              
      Big

          

          

              
      Small

         

    4. </code>
    5.


    资源 ：

    https://getbootstrap.com/docs/4.0/utilities/flex/


  8. 7# 喜欢一个人 | 2019-08-31 10-32



    不需要桌子和桌子。使用变换可以轻松实现。
    例：

    http://codepen.io/arvind/pen/QNbwyM



    码：







    1.         
                .child {
        height: 10em;
        border: 1px solid green;
        position: relative;
      }
      .child-content {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
              
            


    1.         
                

    2.   

          

            
      Big

          

        

        

          

            
      Small





  9. 8# 老夫的少女心 | 2019-08-31 10-32



    我遇到了同样的情况，我想在一行中垂直对齐几个div元素，发现Bootstrap类col-xx-xx将样式应用于div：float：left。



    我必须在div元素上应用样式，如style =“Float：none”，并且所有div元素都垂直对齐。这是工作示例：



    1.     
            
    2. </code>
    3.



    JsFiddle链接



    以防有人想要阅读有关float属性的更多信息：




    W3Schools - Float


  10. 9# 晴天？霹雳 | 2019-08-31 10-32 







    1.         
                    div{
          border:1px solid;
          }
          span{
          display:flex;
          align-items:center;
    2. }
    3. .col-5{
    4. width:100px;
    5. height:50px;
    6. float:left;
    7. background:red;
    8. }
    9. .col-7{
    10. width:200px;
    11. height:24px;
    14. float:left;
    15. background:green;
    17. }
    18.     </code>
    19.   </pre>
    20.    <pre class="snippet-code-html lang-html prettyprint-override">
    21.     <code>
    25. <span>
    26. <div class="col-5">
    27. </div>
    28. <div class="col-7"></div>
    29. </span>
    30.     </code>
    31.   </pre>
    32. </DIV>
    33.



  11. 10# 晴天3 | 2019-08-31 10-32


    我详细说明了一下

    zessx的回答

    ，以便在不同的屏幕尺寸上混合不同的列尺寸时更容易使用。



    如果你使用

    萨斯

    ，你可以将它添加到你的scss文件：



    1.     
            @mixin v-col($prefix, $min-width) {
          @media (min-width: $min-width) {
              .col-#{$prefix}-v {
                  display: inline-block;
                  vertical-align: middle;
                  float: none;
              }
          }
      }

      @include v-col(lg, $screen-lg);
      @include v-col(md, $screen-md);
      @include v-col(sm, $screen-sm);
      @include v-col(xs, $screen-xs);


    这会生成以下CSS（如果您不使用Sass，可以直接在样式表中使用）：



    1.     
            @media (min-width: 1200px) {
          .col-lg-v {
              display: inline-block;
              vertical-align: middle;
              float: none;
          }
      }

      @media (min-width: 992px) {
          .col-md-v {
              display: inline-block;
              vertical-align: middle;
              float: none;
          }
      }

      @media (min-width: 768px) {
          .col-sm-v {
              display: inline-block;
              vertical-align: middle;
              float: none;
          }
      }

      @media (min-width: 480px) {
          .col-xs-v {
              display: inline-block;
              vertical-align: middle;
              float: none;
          }
      }


    现在，您可以在响应列上使用它，如下所示：



    1.     
            

          

              

                  

                      This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
                  

              

                  

                      This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
                  

              

          

          

              

                  

                      This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
                  

              

                  

                      This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
                  

              

          

    3. </code>
    4.

  12. 11# Jacob | 2019-08-31 10-32



    试试这个，







    1.         
                .exe {
        font-size: 0;
      }
    2. .exe > [class*=”col”] {
        display: inline-block;
        float: none;
        font-size: 14px;
        font-size: 1rem;
        vertical-align: middle;
      }
              
            


    1.         
                

    2.    

            
      Big

         

         

             
      Small





  13. 12# 文艺青年3 | 2019-08-31 10-32



    好吧，不小心我混合了一些解决方案，它最终适用于我的布局，我试图在最小分辨率上制作一个带有Bootstrap列的3x3表。







    1.         
                / required styles /
    2. grid a {
        display: table;
      }
    3. grid a div {
        display: table-cell;
        vertical-align: middle;
        float: none;
      }
    4. / additional styles for demo: /
    5. body {
        padding: 20px;
      }
    6. a {
        height: 40px;
        border: 1px solid #444;
      }
    7. a > div {
        width: 100%;
        text-align: center;
      }
              
            


    1.         
                

    2.





  14. 13# 1号 | 2019-08-31 10-32



    这个答案提出了一个黑客，但我强烈建议你使用flexbox（如中所述）

    @Haschem回答

    ），因为它现在到处支持。





    的
    演示链接：
    </强>



    -

    Bootstrap 3




    -

    Bootstrap 4 alpha 6






    您仍然可以在需要时使用自定义类：







    1.         
                .vcenter {
          display: inline-block;
          vertical-align: middle;
          float: none;
      }
              
            


    1.         
                

          

              
      Big

          

              
      Small






    的

    Bootply

    </强>



    运用

    inline-block

    如果你在代码中留出一个真正的空间，就会在块之间增加额外的空间（比如

    …

    …

    ）。如果列大小合计为12，则这个额外的空间会破坏我们的网格：



    1.     
            

          

              
      Big

          

          

              
      Small

          

    3. </code>
    4.


    在这里，我们之间有额外的空间



    和



    （回车和2个标签/ 8个空格）。所以…






    让我们踢出这个额外的空间！



    1.     
            

          

              
      Big

          

              
      Small

          

    2. </code>
    3.





    请注意

    似乎

    无用的评论



    ？他们是
    的
    重要
    </强>

    1.   - 没有他们，之间的空白
    2.  <code>
    3.   <div>
    4. </code>
    5.  元素将占用布局中的空间，打破网格系统。




    注意：Bootply已更新


登录 后才能参与评论